Problema: ¿Cómo actualizar el HTML interno de un tramo dentro de un botón generado dinámicamente usando solo JavaScript?
Estoy creando una función de 'me gusta' (piense en las redes sociales) donde los usuarios pueden dar me gusta o no me gusta a las publicaciones, pero no sé cómo seleccionar el valor del intervalo específico en el que hace clic el usuario. Solo he podido encontrar soluciones jQuery usando .find('span')
const htmlBtn = `<button class="count"><span>0</span></button>`; const create = document.getElementById("create"); create.addEventListener("click", (e) => { const container = document.createElement("div"); container.className = "container"; container.innerHTML = htmlBtn; document.getElementById("app").append(container); }); const app = document.getElementById("app"); app.addEventListener("click", (e) => { const btn = e.target; /* each time someone click nth button, span within nth button increments by 1 let count = document.querySelector("span").innerHTML; count++; document.querySelector("span").innerHTML = count; */ }); <button id="create">Create</button> <div id="app"></div>Resultado esperado: el usuario hace clic en el botón para incrementar el intervalo de solo ese botón en 1.
e.target.children le dará una matriz de todos los elementos secundarios del button y el índice 0 de la matriz debe ser su elemento span que luego puede editar normalmente usando el método innerHTML .
En tu caso,
let count = parseInt(e.target.children[0].innerHTML); e.target.children[0].innerHTML = count + 1;create.addEventListener("click", (e) => { const container = document.createElement("div"); container.className = "container"; container.innerHTML = htmlBtn; document.getElementById("app").append(container); container.addEventListener("click", (e) => { const value = +e.target.innerHTML; e.target.innerHTML = (value + 1).toString(); }); });Los métodos querySelector() y querySelectorAll() se pueden llamar en un elemento principal específico, similar a find() en jQuery.
Asegúrese de usar e.currentTarget y no e.target en el detector de eventos, para hacer referencia al elemento que maneja el evento y no a ningún elemento secundario.
Ejemplo : haga clic en cualquiera de los números para incrementar.
function clickToIncrement(e) { const innerSpan = e.currentTarget.querySelector('span'); if (innerSpan) { innerSpan.textContent++; } } document.getElementById('div1').addEventListener('click', clickToIncrement); document.getElementById('div2').addEventListener('click', clickToIncrement); <div id="div1"> <span>0</span> </div> <div id="div2"> <span>0</span> </div>