Fatal编程技术网
  • javascript/
  • 如何编写if-else语句，引用在javascript中单击的按钮（多个）

如何编写if-else语句，引用在javascript中单击的按钮（多个）

javascript button

如何编写if-else语句，引用在javascript中单击的按钮（多个）,javascript,button,click,Javascript,Button,Click,我正在写一个选择题测验。现在，我已经成功地确定了用户单击了哪个按钮。我现在正试图根据这些信息编写一个if-else语句。每个问题都会有一个不同的按钮代表正确答案，因此理想情况下，我希望类似“如果按钮的id被单击！==正确，这个，否则这个”的内容。我提供了一些代码，让您了解我尝试使用此选项的方向。感谢大家的帮助 //h1 will display the questions var quiz = [ //quiz questions and potential answers here i

我正在写一个选择题测验。现在，我已经成功地确定了用户单击了哪个按钮。我现在正试图根据这些信息编写一个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（变量i=0；i
作为参考，在本例中，“回答1”，回答2，“etc与按钮的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', 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]);
}

const按钮信息=[
{name:'answer one'，键入：'error answer'}，
{name:'answer two'，键入：'error answer'}，
{name:'答案三'，键入：'正确答案'}，
{name:'answer four'，键入：'error answer'}，
];
常量generateButton=（arrayOfButtons）=>{
常量按钮=arrayOfButtons.map（（项目）=>{
const button=document.createElement（'button'）；
button.innerHTML=item.name；
按钮。addEventListener（'单击'，（）=>{
console.log（item.type）；
});
返回按钮；
});
返回按钮；
};
const generatedButtons=generatedbutton（按钮信息）；
const root=document.getElementById（'root'）；
for（设i=0；i

请同时包含一些HTML。您可以使用
this.id
获取单击按钮的id:
if（this.id==currentQuestion.correct）.
。 
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]);
}