【问题标题】:How to write an if else statement referencing which button (of multiples) was clicked in javascript如何编写一个 if else 语句引用在javascript中单击了哪个按钮(多个)
【发布时间】:2020-09-26 23:03:19
【问题描述】:

我正在写一个多项选择测验。就目前而言,我已经设法确定用户单击了哪个按钮。我现在正在尝试根据该信息编写 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",
        //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);
            });

作为参考,在本例中,“answer1”、“answer2”等与按钮的 id 对应

【问题讨论】:

  • 请同时包含您的一些 HTML
  • 您可以使用this.id获取点击按钮的id:if (this.id === currentQuestion.correct) …

标签: javascript button click


【解决方案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]);
}

【讨论】:

    猜你喜欢
    • 2014-05-31
    • 1970-01-01
    • 2022-11-29
    • 1970-01-01
    • 2022-01-06
    • 2023-03-24
    • 2016-03-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多