I'm trying to make a simple application where there is 1 global event listener listening for click events.

At the moment whenever I click on a button it returns undefined even though there is text in it (the buttons start off with no text but then gets filled in).

How would you be able to get the value of the button?

let currentQuestion = -1;


let questions = [
{
  question: "Question 1",
  options: {
    option1: "1",
    option2: "2",
    option3: "3"
  },
  correct: "1"
},
{
  question:"Question 2",
  options: {
    option1: "4",
    option2: "5",
    option3: "6"
  },
  correct: "5"
}
];

document.addEventListener("click", (event)=> {

  console.log(event.currentTarget.value);
  
  currentQuestion++;
  console.log(currentQuestion);

  document.querySelector("#opt1").innerHTML = questions[currentQuestion].options.option1;
  document.querySelector("#opt2").innerHTML = questions[currentQuestion].options.option2;document.querySelector("#opt3").innerHTML = questions[currentQuestion].options.option3;
  
});

      <button id="opt1"></button>
      <button id="opt2"></button>
      <button id="opt3"></button>
      <button id="next">Next</button>

I'm trying to make a simple application where there is 1 global event listener listening for click events.

At the moment whenever I click on a button it returns undefined even though there is text in it (the buttons start off with no text but then gets filled in).

How would you be able to get the value of the button?

let currentQuestion = -1;


let questions = [
{
  question: "Question 1",
  options: {
    option1: "1",
    option2: "2",
    option3: "3"
  },
  correct: "1"
},
{
  question:"Question 2",
  options: {
    option1: "4",
    option2: "5",
    option3: "6"
  },
  correct: "5"
}
];

document.addEventListener("click", (event)=> {

  console.log(event.currentTarget.value);
  
  currentQuestion++;
  console.log(currentQuestion);

  document.querySelector("#opt1").innerHTML = questions[currentQuestion].options.option1;
  document.querySelector("#opt2").innerHTML = questions[currentQuestion].options.option2;document.querySelector("#opt3").innerHTML = questions[currentQuestion].options.option3;
  
});

      <button id="opt1"></button>
      <button id="opt2"></button>
      <button id="opt3"></button>
      <button id="next">Next</button>

• javascript

• Do any of the answers work for you? – Unmitigated Commented Jul 7, 2020 at 3:58

5 Answers 5

According to the mozilla docs: https://developer.mozilla/en-US/docs/Web/API/Event/currentTarget

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

your event handler is attached to document... which doesnt have a value.

try switching to event.target

console.log(event.target.value);

even then.. buttons dont have value... so you need to look at their innerText instead

console.log(event.target.innerText);

Button does not have a value property. Try innerText

Always add real snippets, it make it much easier to test and help with the code:

let currentQuestion = -1
let score = 0
let questions = [
  {
    question: "Question 1",
    answer: "opt2",
    options: {
      option1: "1",
      option2: "2",
      option3: "3",
    },
    correct: "1",
  },
  {
    question: "Question 2",
    answer: "opt3",
    options: {
      option1: "4",
      option2: "5",
      option3: "6",
    },
    correct: "5",
  },
]

document.addEventListener("click", (event) => {
  console.log("currentTarget:", event.currentTarget.id)
  // target works, but it only have an id
  const clickID = event.target.id
  console.log("clickID:", clickID)

  // consider using:
  if (questions[currentQuestion]) {
    console.log("anwser:",questions[currentQuestion].answer)
    if (clickID === questions[currentQuestion].answer) {
      score++
    }
    document.querySelector("#score").innerHTML = score
  }

  currentQuestion++
  console.log("currentQuestion:", currentQuestion)

  // Only use questions[currentQuestion] is exist!
  if (questions[currentQuestion]) {
    document.querySelector("#opt1").innerHTML =
      questions[currentQuestion].options.option1
    document.querySelector("#opt2").innerHTML =
      questions[currentQuestion].options.option2
    document.querySelector("#opt3").innerHTML =
      questions[currentQuestion].options.option3
  }
})

   <button id="opt1"></button>
    <button id="opt2"></button>
    <button id="opt3"></button>
    <button id="next">Next</button>
    <br/>
Score:        <div id="score">0</div>

event.currentTarget will always refer to the document itself, as you are handling the event at the document level. Use event.target instead to get the element from which the click event originated. Also, buttons do not have a value; you can use event.target.textContent to get its text.

let currentQuestion = -1;


let questions = [
{
  question: "Question 1",
  options: {
    option1: "1",
    option2: "2",
    option3: "3"
  },
  correct: "1"
},
{
  question:"Question 2",
  options: {
    option1: "4",
    option2: "5",
    option3: "6"
  },
  correct: "5"
}
];

document.addEventListener("click", (event)=> {
  console.log(event.target.textContent);
  
  currentQuestion++;
  console.log(currentQuestion);

  document.querySelector("#opt1").innerHTML = questions[currentQuestion].options.option1;
  document.querySelector("#opt2").innerHTML = questions[currentQuestion].options.option2;document.querySelector("#opt3").innerHTML = questions[currentQuestion].options.option3;
  
});

<button id="opt1"></button>
<button id="opt2"></button>
<button id="opt3"></button>
<button id="next">Next</button>

You can attach your eventListener to a ID or class.

For example to button with ID = NEXT.

document.getElementById("next").addEventListener("click", (event)=> {

  console.log(event.currentTarget.innerText); // Here you can work with any property
  
  currentQuestion++;
  console.log(currentQuestion);

  document.querySelector("#opt1").innerHTML = questions[currentQuestion].options.option1;
  document.querySelector("#opt2").innerHTML = questions[currentQuestion].options.option2;document.querySelector("#opt3").innerHTML = questions[currentQuestion].options.option3;
  
});

You can work with class too, with javascript

list = document.getElementsByClassName("className");
  for (var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function (e) {
        e.preventDefault();
    });
  }

You can achive same result with more friendly coding with jquery