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

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

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

var div = document.getElementById("abc");
var children = div.childNodes;
console.info(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.info('You Clicked: '+ att);

Если цикл for повторяется 5 раз, консоль всегда будет регистрировать feedbackButton5 независимо от того, какая кнопка нажата. я знаю почему, это так (поскольку он находится в цикле for и перезаписывает значение), но я ищу решение, в котором я могу заставить консоль регистрировать правильное имя класса, нажатого кнопкой.

Вы продолжаете перезаписывать feedbackbutton в своем цикле for.

connexo 09.09.2018 15:50

@connexo, как я уже упоминал в обзоре, я знаю, почему это так ... но я ищу решение :)

hnvasa 09.09.2018 15:51

Переместите эту строку feedbackButton.onclick = function() {myFunction(feedbackButton.getAttribute("class"))}; внутрь цикла.

connexo 09.09.2018 15:52

боюсь, что не получится .. дайте мне такой же результат. я пробовал.

hnvasa 09.09.2018 15:53

Попробуйте написать myFunction, как этот const myFunction = button => console.info(button.getAttribute("class")), и частично примените аргумент вашей кнопки в строке onclick

kavinvin 09.09.2018 15:59

И, как сказал @connexo, вы также должны переместить строку внутри цикла. В противном случае это никогда не сработает, потому что вы всегда ссылаетесь на последний feedback.onclick.

kavinvin 09.09.2018 16:01

@kavinvin ты имеешь в виду вот так? feedbackButton.onclick = function() {const myFunction = button => console.info(button.getAttribute("class"))}; это не работает. Когда я нажимаю на кнопки, ничего не происходит.

hnvasa 09.09.2018 16:12

Ах, извините, я неправильно набрал, вместо этого я отправлю ответ.

kavinvin 09.09.2018 16:26

Используйте children, а не childNodes, так как последний также будет включать текстовые узлы, которые часто не имеют метода appendChild.

connexo 09.09.2018 18:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
122
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте const myFunction = button => () => console.info(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.info(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

Почему бы вам не создать здесь исполняемый сниппет? Это всегда предпочтительнее сайтам с внешним кодом.

connexo 09.09.2018 17:29

Другие вопросы по теме