javascript - event.currentTarget.value 返回未定义的 javascript

Question

我正在尝试制作一个简单的应用程序，其中有 1 个全局事件监听器监听点击事件。

此时，每当我单击一个按钮时，即使其中有文本，它也会返回 undefined(按钮开始时没有文本，但随后会被填充)。

如何获得按钮的值？

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>

Answer 1

根据 Mozilla 文档:https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

当事件遍历 DOM 时，Event 接口(interface)的 currentTarget 只读属性标识事件的当前目标。 它始终指代事件处理程序已附加到的元素，而不是 Event.target，后者标识事件发生的元素并且可能是它的后代。

您的事件处理程序附加到没有值的文档...。

尝试切换到 event.target

console.log(event.target.value);

即使那样......按钮没有值(value)......所以你需要查看它们的 innerText

console.log(event.target.innerText);