JavaScript - Contador de clicks con varios botones

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 25 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Contador de clicks con varios botones

Publicado por Natalie (3 intervenciones) el 11/09/2019 04:09:48
html
java

Buenas noches

Quisiera pedir su colaboración, estoy empezando programación e hice un contador, con un solo boton funciona pero necesito que el contador aumente con un click de 6 botones diferentes.

Hay posibilidad de empezar desde un número (por ejemplo 234 clicks) e ir sumando de a 1?

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<title>Contador</title>
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
 
<button id="boton1"> Adoptar </button>
<button id="boton2"> Adoptar </button>
<button id="boton3"> Adoptar </button>
<button id="boton4"> Adoptar </button>
<button id="boton5"> Adoptar </button>
<button id="boton5"> Adoptar </button>
<br>
<br>
 
<p>Has dado 00<span id="mostrar"> </span> Clicks </p>
 
<script src="js/script.js"> </script>

Java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//boton 1
window.onload = function () {
    var contador = 0;
    document.getElementById("boton1").onclick = function () {
        contador++;
        document.getElementById("mostrar").innerHTML = contador
    }
}
// //boton 2 ---> no funciona!
// window.onload = function () {
//     var contador = 0;
//     document.getElementById("boton2").onclick = function () {
//         contador++;
//         document.getElementById("mostrar").innerHTML = contador
//     }
// }
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Contador de clicks con varios botones

Publicado por joel (895 intervenciones) el 11/09/2019 15:04:30
Hola Natalie, tienes que crear un evento para cada botón... aquí te muestro una manera de como hacerlo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<button class='boton' id="boton1"> Adoptar </button>
<button class='boton' id="boton2"> Adoptar </button>
<button class='boton' id="boton3"> Adoptar </button>
<button class='boton' id="boton4"> Adoptar </button>
<button class='boton' id="boton5"> Adoptar </button>
<button class='boton' id="boton5"> Adoptar </button>
<br>
<br>
 
<p>Has dado <span id="mostrar">0</span> Clicks </p>
 
<script>
window.onload = function () {
    var contador = 0;
    const botones=document.querySelectorAll(".boton");
    botones.forEach(el => {
        el.addEventListener("click", contar);
    });
 
    function contar()
    {
        contador++;
        document.getElementById("mostrar").innerHTML = contador
    }
}
</script>

Si tienes cualquier duda...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 25 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Contador de clicks con varios botones

Publicado por Natalie (3 intervenciones) el 12/09/2019 01:25:39
Muchas gracias, eres muy amable!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 25 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Contador de clicks con varios botones

Publicado por Natalie (3 intervenciones) el 13/09/2019 04:37:56
Tengo una última pregunta, si quiero que se guarde en el LocalStorage.
Que cuando salga de la página y vuelva a entrar el contador quede con el mismo número antes de salir, solo trabajando en un computador.

Como el cache
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar