Estoy tratando de construir algo muy simple, cada vez que hago clic en el botón, aumenta la cantidad dentro del html en 1, pero no funciona y no sé por qué:
let increment = document.getElementById("increment") let counter = document.getElementById("counter") let count = 0 increment.addEventListener("click",adding) function adding() { count +=1 counter.textContent += count } <!DOCTYPE html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <div class="frame"> <div class="counter">0</div> <button id="increment" onclick="adding()"> Click</button> <button id="reset"> Reset</button> </div> <script src="test.js"></script> </body> </html>Debe definir el selector en su etiqueta: <div class="counter">0</div> . Añadir id="counter"
Luego cambie counter.textContent = count++ en lugar de counter.textContent += count+=1
let increment = document.getElementById("increment") let counter = document.getElementById("counter") let count = 0 increment.addEventListener("click",adding) function adding() { counter.textContent = count } <!DOCTYPE html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <div class="frame"> <div id="counter" class="counter">0</div> <button id="increment" onclick="adding()"> Click</button> <button id="reset"> Reset</button> </div> <script src="test.js"></script> </body> </html>Prueba esto en su lugar. usar onclick y addEventListener hace que la función se ejecute dos veces, por lo que el incremento siempre es +2.
elige solo uno de los dos disparadores
let increment = document.getElementById("increment") let counter = document.getElementById("counter") let count = 0 increment.addEventListener("click",adding) function adding() { count +=1 counter.textContent = count } <!DOCTYPE html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <div class="frame"> <div id="counter" class="counter">0</div> <button id="increment"> Click</button> <button id="reset"> Reset</button> </div> <script src="test.js"></script> </body> </html>Hay varias cosas mal con su código.
id del div para counter en lugar de su class . A medida que recupera los elementos usando su id en javascript.onclick='adding()' y una segunda vez en javascript con increment.addEventListener("click",adding) , lo que hace que se incremente dos veces con cada clic. let increment = document.getElementById("increment") let counter = document.getElementById("counter") let count = 0 function adding() { counter.textContent = ++count } <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <div class="frame"> <div id="counter">0</div> <button id="increment" onclick="adding()"> Click</button> <button id="reset"> Reset</button> </div> <script src="test.js"></script> </body> </html>