Как мне нажать кнопку, получить идентификатор и использовать этот идентификатор для выполнения других задач? - Абсолютный новичок в JavaScript

ProgramBox

Как мне нажать кнопку, получить идентификатор и использовать этот идентификатор для выполнения других задач? — Абсолютный новичок в JavaScript

Post author:admin
Запись опубликована:14 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

Абсолютный новичок в JavaScript здесь. Было бы здорово, если бы вы помогли мне разобраться в синтаксисе того, что я хочу сделать (чтобы улучшить его). Это простой MCQ. правильный ответ должен заставить кнопку стать зеленой, а в противном случае-красной.

 document.addEventListener('DOMContentLoaded', function() {

// No idea how to get the id of a button you clicked so everything is hard-coded
document.querySelector('#england').onclick = function() {
    document.querySelector("#england").style.backgroundColor = 'red';
};
document.querySelector('#spain').onclick = function() {
    document.querySelector("#spain").style.backgroundColor = 'red';
};
document.querySelector('#italy').onclick = function() {
    document.querySelector("#italy").style.backgroundColor = 'green';
};

});

^Это находится под <head> <script></script> </head> блоком кода.

 <h3>Which international football team won the 2020 UEFA European Football Championship (aka Euro 2020)?</h3>
<button id='england'>England</button>
<button id='spain'>Spain</button>
<button id='italy'>Italy</button>

^Это находится под <body></body> блоком кода.

Так как же мне:

Нажмите на любую из кнопок и получите идентификатор
Проверьте, есть ли id = #italy
— document.querySelector(" --insert the id here-- ").style.backgroundColor = 'green';
Ещё, document.querySelector(" --insert the id here-- ").style.backgroundColor = 'red';

Почему я не могу этого сделать?:

Я думал об var = id of button clicked этой переменной и использовал ее, но я не знаю, как это сделать… Как вы пишете код, который знает, на какую кнопку нажимается?
document.getElementById() Помогло бы? Я вообще не знаю его применения.
Я могу предвидеть сценарий, при котором у меня будет более 3 кнопок, и выполнение подобных действий станет очень болезненным.

Пожалуйста, полегче со мной!

1. Примечание к рекомендациям: весь код JavaScript, который взаимодействует с элементами DOM, должен располагаться в конце тела, прямо перед закрывающим тегом ( <body> ... <script> ... </script></body> ), а не в голове. Таким образом, вы уверены, что при выполнении кода JavaScript все элементы DOM были загружены.

Ответ №1:

Вы могли бы сделать что-то вроде:

 // Select all buttons `.btnAnswer` and for each one...
document.querySelectorAll('.btnAnswer').forEach(btn => {
  // ... add an event listener for the `click` event that...
  btn.addEventListener('click', (event) => {
    // ... retrieve the button ID and...
    const btnId = btn.getAttribute('id');
    // ... set the background color to green if thr ID is `italy` or to red otherwise
    btn.style.backgroundColor = btnId === 'italy' ? 'green' : 'red';
  })
});

 <h3>Which international football team won the 2020 UEFA European Football Championship (aka Euro 2020)?</h3>
<button class="btnAnswer" id='england'>England</button>
<button class="btnAnswer" id='spain'>Spain</button>
<button class="btnAnswer" id='italy'>Italy</button>

В любом случае проблема с вашим подходом заключается в том, что код не может быть повторно использован, так как он зависит от идентификатора кнопки (который уникален); если у вас есть еще один вопрос с другими вариантами, вам придется написать довольно много повторяющейся логики.

Возможно, предпочтительным подходом может быть:

 const correctAnswers = {
  q1: 'italy',
  q2: 'no',
  q3: 'elizabeth'
};

// Select all questions and for each one...
document.querySelectorAll('.question').forEach(q => {
  // ... fetch the correct answer for the question and...
  const correctAnswer = correctAnswers[q.getAttribute('id')]
  // ... select all the corresponding answer options, then...
  q.querySelectorAll('.btnAnswer').forEach(btn => {
    // ... add an event listener to the `click` event that...
    btn.addEventListener('click', (event) => {
      // ... retrieve the corresponding answer and...
      const givenAnswer = btn.dataset.answer;
      // ... set the background color to green if the answer is correct or to red if it is wrong
      btn.style.backgroundColor = givenAnswer === correctAnswer ? 'green' : 'red';
    })
  })
});

 <div class="question" id="q1">
  <h3>Which international football team won the 2020 UEFA European Football Championship (aka Euro 2020)?</h3>
  <button class="btnAnswer" data-answer='england'>England</button>
  <button class="btnAnswer" data-answer='spain'>Spain</button>
  <button class="btnAnswer" data-answer='italy'>Italy</button>
</div>

<div class="question" id="q2">
  <h3>Can pinapple go on pizza?</h3>
  <button class="btnAnswer" data-answer='yes'>Yes</button>
  <button class="btnAnswer" data-answer='no'>No</button>
</div>

<div class="question" id="q3">
  <h3>Who is the Queen of England?</h3>
  <button class="btnAnswer" data-answer='elizabeth'>Elizabeth II</button>
  <button class="btnAnswer" data-answer='elsa'>Elsa from Frozen</button>
</div>

1. Ух ты! Большое спасибо за улучшения и предложения. Да, теперь я вижу, где я ошибся в логике. Ваш подход-это явное улучшение. Кроме того, я не знал о большей части используемого вами синтаксиса, но, прочитав документацию/посмотрев ее, я понял это сейчас. Спасибо, что пошли дальше, чтобы помочь мне! Я буду хорошо использовать ваши методы. 😀

Ответ №2:

 document.querySelector('button').onclick = function() {
    console.log(this.id);

}

Ты понял. Удалите все document.qwerySelector() с помощью этой строки

Ответ №3:

Следуйте приведенному ниже подходу.

Выберите все узлы с document.querySelectorAll('button')
Добавьте onclick событие ко всем кнопкам.

Внутри события щелчка проверьте идентификатор цели и примените соответствующий стиль.

 document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('button').forEach(node => node.onclick = function (event) {
    const nodeId = event.target.id;
    console.log('Clicked', nodeId);
    const bgColor = nodeId === 'italy' ? 'green' : 'red';
    event.target.style.backgroundColor = bgColor;
  })
});

 <h3>Which international football team won the 2020 UEFA European Football Championship (aka Euro 2020)?</h3>
<button id='england'>England</button>
<button id='spain'>Spain</button>
<button id='italy'>Italy</button>