单击按钮后如何从按钮获取值答案

【问题标题】：How to get value from button after it has been clicked单击按钮后如何从按钮获取值
【发布时间】：2021-12-08 07:16:18
【问题描述】：

我正在为这项任务苦苦挣扎：将事件侦听器固定到按钮上。创建一个在单击其中一个按钮时调用的函数。使用 console.log 进行检查。确保将点击事件传递给此函数。 确保您可以访问在此函数中单击的按钮的值。使用 console.log 进行检查。单击时您希望在控制台中看到的结果是：豹/狮子/大象/犀牛或水牛。

fiveButtons = document.getElementsByClassName("big-five-button");
for (var i = 0; i < fiveButtons.length; i++) {
    fiveButtons[i].addEventListener("click", function () {
        
        Array.from(fiveButtons).forEach(function (nameButton) {
            console.log(nameButton.innerHTML);
        })
    });
}

这是我到目前为止写的。当我现在单击按钮时，结果是所有按钮的文本。虽然我希望在单击按钮之后只显示“Lion”。

<h1>The Big Five</h1>
    <ul class="big-five-list">
       <li class="big-five-list-item">
           <button class="big-five-button">Lion</button>
       </li> etc.

【问题讨论】：

标签： javascript html dom addeventlistener

【解决方案1】：

在创建 addEventListener 时，您可以使用事件对象来定位点击的元素，如下所示：

fiveButtons[i].addEventListener("click", function (event) {
       console.log(event.target.innerHTML);
    });

【讨论】：

谢谢！这正是我要寻找的。span>
np @Seline :) 如果对您有帮助，请将其标记为正确答案，tnx –

【解决方案2】：

您可以更改按钮以包含如下所示的 onclick 功能：

https://www.w3schools.com/jsref/event_onclick.asp

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction('Lion')">Lion</button>
<input type="text" value="" id="getValue">

<p id="demo"></p>

<script>
function myFunction(value) {
  document.getElementById("getValue").value = value;
}
</script>

</body>
</html>

然后，onclick 函数将在 () 中为函数名称提供一个值。这会将您想要的值传递给函数，并且可以随心所欲地调用它。上面的 sn -p 展示了一个如何使用的例子

【讨论】：

【解决方案3】：

试试这个解决方案！

fiveButtons = document.getElementsByClassName("big-five-button");
    for (var i = 0; i < fiveButtons.length; i++) {
        fiveButtons[i].addEventListener("click", function (item) {
       console.log(item.target.innerHTML);
        });
    }

【讨论】：

【解决方案4】：

你传递给addEventListener的函数给出了一个事件参数：

fiveButtons = document.getElementsByClassName("big-five-button");
for (var i = 0; i < fiveButtons.length; i++) {
    fiveButtons[i].addEventListener("click", function (event) { // use the first argument
        console.log('element value:', event.target.value); // log the 'value' of the event target;
        // I suspect you want the innerHTML or innerText
        console.log('element innerText:', event.target.innerText);
    });
}

然后可以从 event.target 中的 DOM 节点获取所需的信息

【讨论】：

【解决方案5】：

您不需要在 for 循环中使用 Array.from。你可以这样做：

fiveButtons = document.getElementsByClassName("big-five-button");
for (let i = 0; i < fiveButtons.length; i++) {
    fiveButtons[i].addEventListener("click", function () {
        console.log(fiveButtons[i].innerText);
    });
}

【讨论】：

【解决方案6】：

已编辑

// Get all the buttons
const fiveButtons = document.getElementsByClassName("big-five-button");

// Iterate through the collection of buttons
// Here is let i = 0 instead of var i = 0, since var has functional scope and let has block scope
// If we used var i = 0 it would not work implicitly because i would exist in the scope of a function,
// and all the event handlers (for each button) would share the same value of i
for (let i = 0; i < fiveButtons.length; i++) {

  // For each button register event handler
  fiveButtons[i].addEventListener("click",  _ => {

    // When button is clicked this part of a code is being called
    // Because of javascript CLOSURE, it remembers the i value
    console.log(fiveButtons[i].innerHTML)

  });

}

如果这不明白，请阅读 javascript 中的闭包。

【讨论】：

您能否添加有关建议代码如何解决问题的详细信息？纯代码答案不是很有帮助，对提问者和其他人都没有。