Блог

Главная - Вопросы по программированию - Как написать оператор if else, указывающий, какая кнопка (из кратных) была нажата в javascript

Как написать оператор if else, указывающий, какая кнопка (из кратных) была нажата в javascript

#javascript #button #click

#javascript #кнопка #нажмите

Вопрос:

Я пишу тест с несколькими вариантами ответов. В нынешнем виде мне удалось определить, на какую кнопку нажимает пользователь. Сейчас я пытаюсь написать оператор if else на основе этой информации. У каждого вопроса будет своя кнопка, представляющая правильный ответ, поэтому в идеале я хотел бы что-то вроде «если идентификатор кнопки нажат! == правильно, это, иначе это». Я предоставил часть кода, чтобы дать вам представление о том, куда я пытаюсь пойти с этим. Вся помощь приветствуется!

 //h1 will display the questions
var quiz = [
    //quiz questions and potential answers here in this array
    Question1 = {
        question: "this is question 1",
        //these will probably be changed into buttons
        answer1: "wrong answer",
        answer2: "wrong answer",
        answer3: "right answer",
        answer4: "wrong answer",
        correct: "answer3"
        
    },
    Question2 = {
        question: "this is question 2",
        //these will probably be changed into buttons
        answer1: "wrong answer",
        answer2: "right answer",
        answer3: "wrong answer",
        answer4: "wrong answer",
        correct: "answer2"
  
 for (var i = 0; i < allButtons.length; i  ) {
            allButtons[i].addEventListener("click", function() {
                console.clear();
                console.log("you clicked: ", this.innerHTML);
            });

Для справки, в этом случае «ответ1», «ответ2» и т. Д. Соответствуют идентификаторам кнопок

Комментарии:

1. Пожалуйста, включите также часть вашего HTML

2. Вы можете использовать this.id для получения идентификатора нажатой кнопки : if (this.id === currentQuestion.correct) … .

Ответ №1:

Итак, насколько я понимаю вашу ситуацию, вы хотите динамически генерировать некоторые кнопки, которые зависят от вопроса, верно? Мне удалось создать что-то подобное, я не знаю, может ли это решить вашу проблему, по крайней мере, это может дать вам некоторое представление…

Итак, в основном у нас есть простой HTML-документ, который включает только корневой div и вопрос, вопрос жестко запрограммирован, но сосредоточен на логике, лежащей в основе части JS:

 <body>
    <div id="root">
      <h1>Which one is the blablablababla?</h1>
    </div>
    <script src="index.js"></script>
  </body>

И вот как мы генерируем кнопки в зависимости от информации, которую мы ей предоставляем, вы можете добавить вопросы в этот массив или, возможно, создать объект и предоставить ему два массива, один из которых содержит вопросы, а другой — ответы:

 const buttonsInfo = [
  { name: 'answer one', type: 'wrong answer' },
  { name: 'answer two', type: 'wrong answer' },
  { name: 'answer three', type: 'right answer' },
  { name: 'answer four', type: 'wrong answer' },
];

const generateButton = (arrayOfButtons) => {
  const buttons = arrayOfButtons.map((item) => {
    const button = document.createElement('BUTTON');
    button.innerHTML = item.name;
    button.addEventListener('click', () => {
      console.log(item.type);
    });
    return button;
  });
  return buttons;
};

const generatedButtons = generateButton(buttonsInfo);
const root = document.getElementById('root');

for (let i = 0; i < generatedButtons.length; i  ) {
  root.appendChild(generatedButtons[i]);
}

Вот как это выглядит в браузере