Hay algún problema con los botones de mi corazón en la sección "Recomendado para ti". En la publicación "Receta del día", el botón del corazón funciona bien. Lo que estoy tratando de hacer es aumentar también la cantidad de Me gusta para las publicaciones en el lado derecho. Sin embargo, cada vez que hago clic en los otros botones de corazón en la sección "Recomendado para ti", solo aumentan la cantidad de Me gusta para la publicación de ROTD.
Aquí está el código JavaScript y HTML que usé:
console.log("JavaScript is connected"); let numCount = 68 let count = document.querySelector('.count') function addLike () { numCount ++ count.innerText = numCount } <div class="likebtn1"> <button class= "heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart" alt="the heart-like button"></button> <p class="yurilike"><span class="count">68</span></p> </div> <div class="likebtn2"> <button class="heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart2" alt="the heart-like button"></button> <p class="Emilike"><span class="count">212</span></p> </div> <div class="likebtn3"> <button class="heartbtn" onclick="addLike()"><img src="imgs/heart.png" class="heart3" alt="the heart-like button"></button> <p class="Marisalike"><span class="count">33</span></p> </div>Cada vez que trato de crear funciones separadas para las publicaciones de la sección RFY y hago lo mismo para los otros botones del corazón, todos dejan de funcionar y no hacen nada.
Aquí hay un video para mostrar de lo que estoy hablando: https://www.youtube.com/watch?v=8NYqizDBkZk
Es porque querySelector siempre devuelve el primer elemento que coincide con la consulta. Cuando tu lo hagas
document.querySelector('.count') Siempre le está dando el mismo .count div, independientemente del botón Me gusta que se presionó.
Debe usar una consulta más específica como .likebtn2 .count , o darle a cada recuento un nombre de clase único.
document.body.addEventListener('click', (event) => { const button = event.target.closest('.button'); if (!button) return; const container = button.closest('.likes'); if (!container) return; const counter = container.querySelector('.counter'); if (!counter) return; counter.innerText = Number(counter.innerText) + 1; }); <div class="likes"> <button class="button">I love it!</button> <div class="counter">0</div> </div> <div class="likes"> <button class="button">I love it!</button> <div class="counter">0</div> </div> <div class="likes"> <button class="button">I love it!</button> <div class="counter">0</div> </div>Cambie su código JS al que tengo y luego agregue this palabra clave a su botón que invoca la función JS.
function addLike(e){ let count = Number(e.nextElementSibling.innerText) + 1; e.nextElementSibling.innerText = count; } <div class="likebtn1"> <button class= "heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart" alt="the heart-like button"></button> <p class="yurilike"><span class="count">68</span></p> </div> <div class="likebtn2"> <button class="heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart2" alt="the heart-like button"></button> <p class="Emilike"><span class="count">212</span></p> </div> <div class="likebtn3"> <button class="heartbtn" onclick="addLike(this)"><img src="imgs/heart.png" class="heart3" alt="the heart-like button"></button> <p class="Marisalike"><span class="count">33</span></p> </div>