Tengo 2 listas colapsables y 2 botones, quiero que si hago clic en el primer botón, todos los encabezados de la primera lista obtengan un nuevo texto (como "Hola, mi nombre es Max") y si hago clic en el segundo botón, debe agregar un nuevo botón a todos los cuerpos de la segunda lista.
Estoy buscando una solución en JavaScript (jQuery también es posible). El problema es que soy nuevo en todo esto y no tengo idea de cómo resolver esta tarea. Estoy agradecido por cada ayuda.
Mi código:
<ul class="collapsible" id="1"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> <ul class="collapsible" id="2"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> <button class="btn yellow" id="collapsible-header-green">Change text of all headers ul(id="1")</button> <button class="btn yellow" id="collapsible-body-green"> Add buttons to all body's ul(id="2")</button>Aquí está el código:
// change text in first list when click first button const list1 = document.getElementById("1"); const button1 = document.getElementById("collapsible-header-green"); button1.onclick = function () { const elements = list1.getElementsByClassName("collapsible-header"); for (let element of elements) { element.innerHTML = "new text"; } }; // add button in second list when click second button const list2 = document.getElementById("2"); const button2 = document.getElementById("collapsible-body-green"); button2.onclick = function () { const elements = list2.getElementsByClassName("collapsible-body"); for (let element of elements) { const newButton = document.createElement("button"); newButton.innerHTML = "new button"; element.appendChild(newButton); } }; <ul class="collapsible" id="1"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> <ul class="collapsible" id="2"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> <button class="btn yellow" id="collapsible-header-green">Change text of all headers ul(id="1")</button> <button class="btn yellow" id="collapsible-body-green"> Add buttons to all body's ul(id="2")</button>