javascript - получить правильное значение кнопки при нажатии - PullRequest
Новая
       0

javascript - получить правильное значение кнопки при нажатии

0 голосов
/ 09 сентября 2018

Я пробую решение только для javascript (без jQuery или без HTML-JS), где я получаю все дочерние узлы элемента DOM. Затем я добавляю текстовую область и кнопку после каждого из этих дочерних узлов.

Вот упрощенный фрагмент кода: 

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 и перезаписывает значение), но я ищу решение, в котором я могу получить консоль для записи правильного имени класса, нажатого кнопкой.

1 Ответ

0 голосов
/ 09 сентября 2018

Используйте 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...