单击按钮后如何从按钮中获取值
[英]How to get value from button after it has been clicked
问题描述
I'm struggling with this assignment: Pin an event listener to the buttons.
我正在努力完成这项任务：将事件侦听器固定到按钮上。 Create a function that gets called when one of the buttons is clicked.创建一个在单击其中一个按钮时调用的函数。 Check this with a console.log.用 console.log 检查一下。 Make sure the click event is passed to this function.确保点击事件传递给这个函数。 Make sure you have access to the value of the button clicked in this function.确保您可以访问在此函数中单击的按钮的值。 Check this with console.log.用 console.log 检查一下。 The outcome you want to see in the console when you click is: Leopard / Lion / Elephant / Rhino or Buffalo.单击时您希望在控制台中看到的结果是：Leopard / Lion / Elephant / Rhino 或 Buffalo。
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);
})
});
}
This is what I wrote so far.这是我到目前为止所写的。 When I'm clicking the button now, the outcome is the text from all the buttons.当我现在单击按钮时，结果是来自所有按钮的文本。 While I want the outcome to only be "Lion" after the button lion has been clicked.虽然我希望在单击按钮 Lion 后结果仅为“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.
6 个解决方案
解决方案1
0 2021-10-21 14:08:32
You can change the button to include an onclick function like the below:您可以更改按钮以包含如下所示的 onclick 功能：
https://www.w3schools.com/jsref/event_onclick.asp 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>
The onclick function will then have a value inside the () for the function name.然后 onclick 函数将在 () 中有一个函数名称的值。 This will pass the value you want across to the function and it can be called whatever you want.这会将您想要的值传递给函数，并且可以随心所欲地调用它。 The above snippet shows an example of how it can be used上面的代码片段显示了如何使用它的示例
解决方案2
0 2021-10-21 14:09:52
fiveButtons = document.getElementsByClassName("big-five-button");
for (var i = 0; i < fiveButtons.length; i++) {
fiveButtons[i].addEventListener("click", function () {
console.log(fiveButtons[i].innerHTML)
});
}
解决方案3
0 2021-10-21 14:09:58
Try this solution!试试这个解决方案！
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
0 2021-10-21 14:09:59
when creating an addEventListener you can use the event object to target the element clicked, like this:创建 addEventListener 时，您可以使用事件对象来定位单击的元素，如下所示：
fiveButtons[i].addEventListener("click", function (event) {
console.log(event.target.innerHTML);
});
解决方案5
0 2021-10-21 14:11:59
The function you pass to addEventListener gives an event argument:您传递给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);
});
}
You can then get the required information from the DOM node in event.target然后就可以从 event.target 中的 DOM 节点获取所需的信息
解决方案6
0 2021-10-21 14:12:36
You don't need the Array.from inside the for loop.您不需要 for 循环内的 Array.from。 You can just do that:你可以这样做：
fiveButtons = document.getElementsByClassName("big-five-button");
for (let i = 0; i < fiveButtons.length; i++) {
fiveButtons[i].addEventListener("click", function () {
console.log(fiveButtons[i].innerText);
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.