JavaScript - Duda Javascript

Duda Javascript

Publicado por Alvaro (5 intervenciones) el 29/08/2022 02:36:36

Tengo una duda, en la clase me enseñaron diferente a lo que veo en la mayoría de los foros, porqué no puedo hacer andar este contador de clicks? Va sólo hasta 1



<input type="button" name="" id="btnEj13" value="Click"><br>

<h3 id="contadorclicksEj13">0</h3>

//En Javascript esto;

document.querySelector("#btnEj13").addEventListener("click", calcularEj13);

function calcularEj13() {

let contador = 0

let cuenta = ++contador

document.querySelector("#contadorclicksEj13").innerHTML = cuenta

//Ayuda please! Se me quema el cerebro

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Duda Javascript

Publicado por Ivan (118 intervenciones) el 29/08/2022 11:26:55

Hola,

es muy interesante tu pregunta porque JavaScript es muy flexible y tu ejercicio se puede resolver de muchas formas diferentes.
El principal problema que tienes es que cada vez que llamas a tu función calcular pones sus variables internas a 0, por eso siempre te da 1. Debes tener la variable contador fuera de la función.

El siguiente problema es que estás haciendo un contador y una función para cada botón. Esto es un error de concepto, una función debería servir para todos los botones.

Te pongo un código de ejemplo con un nivel un poco superior a tu ejercicio, pero donde se pueden crear tantos contadores como quieras.
En vez de utilizar un evento addEventListener, añado la función directamente al elemento que quiero contar, este elemento simplemente debe tener un ID que le paso a la función.

La función a partir de este ID crea un elemento <p> con su propio ID y muestra su contador.

La variable contadores es un objeto, declarada fuera de la función y por tanto global, al que accedemos como si fuera un array asociativo a través del ID.

Si te fijas utilizo getElementById en vez de querySelector, porque el querySelector está más enfocado a buscar elementos de CSS y para mí, en este ejercicio, es más práctico getElementById.

Sería bueno que te fijes en cada particularidad del código porque hay bastantes detalles en pocas lineas, JavaScript es muy flexible y potente en entornos HTML.

<!DOCTYPE html>

<html lang="es">

<head>

	<meta charset="utf-8">

<script>

var contadores = {};

function contador(element) {

	// Si no existe el contador lo creamos

	if (contadores[element] == undefined) {

		contadores[element] = 1;

		let tag = document.createElement("p");

		tag.setAttribute('id', 'cont'+element);

		let text = document.createTextNode(element + ": 1");

		tag.appendChild(text);

		document.getElementById("contadores").appendChild(tag);

	// Si ya existe el contador lo sumamos

	} else {

		contadores[element] = contadores[element] + 1;

		let tag = document.getElementById('cont'+element);

		tag.innerHTML = element + ": " + contadores[element];

</script>

</head>

<body>

<h3>Contadores</h3>

<p id="contadores">Ejemplo de diversos contadores creados de forma dinámica en diferentes elementos HTML</p>

<button id="#btnEj13" onclick="contador(this.id)">Botón</button>

<input id="#btnEj14" type="button" value="Input" onclick="contador(this.id)" />

<p id="#btnEj15" onclick="contador(this.id)" style="cursor:pointer">Párrafo</p>

<a  id="#btnEj16" href="#" onclick="contador(this.id)">Enlace</p>

</body>

</html>

Si algo no lo entiendes puedes buscar su documentación oficial en MDN.

Un saludo!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar