如何使用 Vanilla JS 切换多个 html 文本元素？

Question

I am trying to use the most efficient method of toggling the innerHTML on multiple elements. I am still learning and have gotten stuck at this point

 var button = document.querySelectorAll(".title"); for (i=0; i < button.length; i++) { button[i].addEventListener('click', textToggle) } function textToggle() { if (button.getAttribute("data-text-swap") == button.innerHTML) { button.innerHTML = button.getAttribute("data-text-original"); } else { button.setAttribute("data-text-original", button.innerHTML); button.innerHTML = button.getAttribute("data-text-swap"); } }

 <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details> <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details>

Answer 1

You are almost there. You just need to operate on the e.target element, which is the element associated with the click event, and not the button variable which is a list of elements.

 var button = document.querySelectorAll(".title"); for (i=0; i < button.length; i++) { button[i].addEventListener('click', textToggle) } function textToggle(e) { const el = e.target; if (el.getAttribute("data-text-swap") == el.innerHTML) { el.innerHTML = el.getAttribute("data-text-original"); } else { el.setAttribute("data-text-original", el.innerHTML); el.innerHTML = el.getAttribute("data-text-swap"); } }

 <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details> <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details>

Answer 2

You refer to button that is not an element but an array. You can refer to the clicked button in the callbackwith the keyword this

 var button = document.querySelectorAll(".title"); for (i=0; i < button.length; i++) { button[i].addEventListener('click', textToggle) } function textToggle() { if (this.getAttribute("data-text-swap") == this.innerHTML) { this.innerHTML = this.getAttribute("data-text-original"); } else { this.setAttribute("data-text-original", this.innerHTML); this.innerHTML = this.getAttribute("data-text-swap"); } }

 <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details> <details> <summary class="title" data-text-swap="Hide text"> Show text </summary> <p>text</p> </details>