时间戳

首页 > 解决方案 > javascript - 单击时获取按钮的正确值

javascript - javascript - 单击时获取按钮的正确值

问题描述

我正在尝试仅使用 javascript 的解决方案（没有 jQuery 或没有 HTML-JS），我在其中获取 DOM 元素的所有 childNode。然后我在每个子节点之后添加一个文本区域和一个按钮。

这是一个简化的代码片段：

var div = document.getElementById("abc");
var children = div.childNodes;
console.log(children[1])
var child;
for(var i=1; i < children.length; i++){
    var input = document.createElement("textarea");
    input.name = "post"+i;
    children[i].appendChild(input); //add text area

    var feedbackButton = document.createElement("button");
    feedbackButton.innerHTML = "Send";
    feedbackButton.classList.add("feedbackButton" + i);
    children[i].appendChild(feedbackButton); //add button
}
feedbackButton.onclick = function() {myFunction(feedbackButton.getAttribute("class"))};

然后我的函数定义如下：

function myFunction(att) {
    console.log('You Clicked: '+ att);

如果 for 循环迭代 5 次，无论按下什么按钮，控制台都会始终记录 feedbackButton5。我知道为什么会这样（因为它在 for 循环中并覆盖了值），但我正在寻找一种解决方案，让控制台记录正确的按下按钮的类名。

标签： javascriptdombutton

解决方案

用于const myFunction = button => () => console.log(button.getAttribute("class"))创建myFunction

因此，您可以feedbackButton在 for 循环中部分应用您的。它之所以有效，是因为您将其存储在函数范围内，而不是在调用时引用它。

<html>
<body>
    <div id="abc">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        const myFunction = button => () => console.log(button.getAttribute("class"));

        var div = document.getElementById("abc");
        var children = div.children;
        for(var i=0; i < children.length; i++){
            var input = document.createElement("textarea");
            input.name = "post"+i;
            children[i].appendChild(input);
        
            var feedbackButton = document.createElement("button");
            feedbackButton.innerHTML = "Send";
            feedbackButton.classList.add("feedbackButton" + i);
            children[i].appendChild(feedbackButton);
            feedbackButton.onclick = myFunction(feedbackButton);
        }
    </script>
</body>
</html

推荐阅读