Я пытаюсь использовать решение только для 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 и перезаписывает значение), но я ищу решение, в котором я могу заставить консоль регистрировать правильное имя класса, нажатого кнопкой.
@connexo, как я уже упоминал в обзоре, я знаю, почему это так ... но я ищу решение :)
Переместите эту строку feedbackButton.onclick = function() {myFunction(feedbackButton.getAttribute("class"))};
внутрь цикла.
боюсь, что не получится .. дайте мне такой же результат. я пробовал.
Попробуйте написать myFunction
, как этот const myFunction = button => console.info(button.getAttribute("class"))
, и частично примените аргумент вашей кнопки в строке onclick
И, как сказал @connexo, вы также должны переместить строку внутри цикла. В противном случае это никогда не сработает, потому что вы всегда ссылаетесь на последний feedback.onclick
.
@kavinvin ты имеешь в виду вот так? feedbackButton.onclick = function() {const myFunction = button => console.info(button.getAttribute("class"))};
это не работает. Когда я нажимаю на кнопки, ничего не происходит.
Ах, извините, я неправильно набрал, вместо этого я отправлю ответ.
Используйте children
, а не childNodes
, так как последний также будет включать текстовые узлы, которые часто не имеют метода appendChild
.
Используйте 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
Почему бы вам не создать здесь исполняемый сниппет? Это всегда предпочтительнее сайтам с внешним кодом.
Вы продолжаете перезаписывать
feedbackbutton
в своем цикле for.