Question 243198 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Conditional statement when dealing with multiple buttons

What I am trying to do is write the conditional for the boolean value of my buttons. I have 4 buttons, 3 false and one true. I want a block of code to execute for the false values, and another to execute for the true value.

This is what I have so far.

function startGame() {
    
quiz.innerHTML = "<h1>Choose the tag that corresponds with <br> the definition of an empty        tag</h1>";
startBtn.innerHTML = "";

var button = document.createElement("button");
button.textContent = "The p tag";
questionBtn.appendChild(button);
button.setAttribute("style", "background-color: black; color: white; font-size: 20px; width: 100px;")

var button2 = document.createElement("button");
button2.textContent = "The nav tag";
questionBtn.appendChild(button2);
button2.setAttribute("style", "background-color: black; color: white; font-size: 20px; width: 100px;")

var button3 = document.createElement("button");
button3.textContent = "The img tag";
questionBtn.appendChild(button3);
button3.setAttribute("style", "background-color: black; color: white; font-size: 20px; width: 100px;")

var button4 = document.createElement("button");
button4.textContent = "The h1 tag";
questionBtn.appendChild(button4);
button4.setAttribute("style", "background-color: black; color: white; font-size: 20px; width: 100px;")


var btns = document.querySelectorAll("button")

for (i of btns) {
    i.addEventListener("click", function() {

var button = false;
var button2 = false;
var button3 = true;
var button4 = false;

if (i === true) {
    prompt("hello")
} else { 
    alert("hello")
}
    });
}

I’m not quite sure how to target the the button3 with the true value. Currently, every button is returning the alert.

Tags:

2

Answers


  1. 0

    You could use an index to target the special element.

    let idx = 2; // 3rd button
const btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) 
    btns[i].addEventListener('click', e => {
        if (i === idx) prompt('hello');
        else alert('hello');
    });
    Login or Signup to reply.
  2. 0

    If you delegate and use an object array, your quiz will be much simpler

    const questions = [{
  "title": 'Choose the tag that corresponds with <br> the definition of an empty or void tag',
  "answers": ["The p tag", "The nav tag", "The img tag", "The h1 tag"],
  "correct": 2
},{ /* next question here */}];

window.addEventListener("DOMContentLoaded", () => {
  let cnt = 0;
  const quiz = document.getElementById("quiz");
  const buttons = quiz.querySelectorAll('button');
  quiz.addEventListener('click',(e) => {
    const tgt = e.target.closest('button')
    console.log(tgt.dataset.idx == questions[cnt].correct)
  })
  const startQuiz = () => {
    if (cnt >= questions.length) return;
    const question = questions[cnt];
    question.answers.forEach((answer, i) => {
      buttons[i].textContent = answer;
      buttons[i].dataset.idx = i;
    });
  }
  document.getElementById('next').addEventListener('click', () => {
    cnt++;
    startQuiz();
  })
  startQuiz()

});
    button {
  background-color: black;
  color: white;
  font-size: 20px;
  width: 100px;
}
    <div id="quiz">
  <h1></h1>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
</div>
<button id="next">Next</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search