如何编写引用javascript中单击了哪个按钮多个的if else语句

如何解决如何编写引用javascript中单击了哪个按钮多个的if else语句

我正在写一个多项选择测验。目前，我已经设法确定用户单击了哪个按钮。我现在正在尝试根据该信息编写if else语句。每个问题都会有一个代表正确答案的不同按钮，因此理想情况下，我想要类似“如果按钮的ID被单击！==正确，则此，否则此”。我提供了一些代码，以使您了解我要在哪里使用它。感谢所有帮助！

//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",answer2: "right answer",answer3: "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);
            });

作为参考，在这种情况下，“ answer1”，“ answer2”等对应于按钮的ID

解决方法

据我所知，您想动态生成一些按钮来解决问题，对吗？我设法建立了这样的东西，我不知道这是否可以解决您的问题，至少它可以给您一些见解...

因此，基本上，我们有一个简单的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',{ name: 'answer three',type: 'right answer' },{ name: 'answer four',];

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]);
}

如何编写引用javascript中单击了哪个按钮多个的if else语句

如何解决如何编写引用javascript中单击了哪个按钮多个的if else语句

解决方法

相关推荐