0

tengo un html con un boton y un div , quiero que ese div al hacer click aumente su numero se que se puede hacer con document.write pero aun no entiendo muy bien la sintaxis de todo eso ojala me puedan ayudar

<div id="numero"> </div>
Eso seria el html

Y en js seria

var x = 0
x++
var sumar = document.getElementById("numero");
sumar.innerHTML = x

No se si esta correcto , pero la idea es tener un boton con un onclick , que haga que en mi div se vaya aumentando el numero por cada click

0

2 respuestas 2

1
  • document.write no es una opción pues va a resccribir todo el contenido de tu HTML y tu solo deseas motificar el texto que aparece en el div
  • Puedes declarar una variable inicializada en 0 y posterior con la sintaxis de variable += 1 aumentar su valor en 1 cada que ocurra el evento click del botón
  • Usa la propiedad innerText en cambio del div para poder darle el incremento que sucede en el evento click.

    <button id="incremento">Incrementa</button>
     <div id="valor"></div>
    <script>
        let boton = document.getElementById("incremento")
        let valor = document.getElementById("valor")
        let inicio = 1
        
        boton.addEventListener("click", () => {
          valor.innerText = inicio += 1
        })
       
    </script>

Si por ejemplo del código propuuesto deseas saber las propiedades de la variable que representa al div puedes imprimirlo mediante:

console.log(valor)

Que de entre muchas opciones puedes encontrar este frgmento:

{ [native code] },
  hidden: false,
  id: "valor",
  innerHTML: "",
  innerText: "",
  inputMode: "",

Y podemos ocupar tanto la 3 o 4 sin embargo para conocer mas sobre ambas recomiendo revises los enlaces que te dejo

Referencias

0

cada vez que haces click en el boton estas reiniciando tu variable x por lo que siempre quedara en 1.

debes hacer lo siguiente:

var x = 0;
function sumar(){
     x++;
     document.getElementById('numero').innerHTML = x;
}

y en tu html llamar a la function de esta forma:

<button onclick="sumar()">Sumar</button>
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.