Tengo un javascript muy básico que se supone que muestra cuántas veces se ha hecho clic en un enlace y en el quinto clic redirige a una nueva página. Se parece a esto:

function counter() {
  var counterCount = 0;
  var amount = document.getElementById("amount");
  counterCount += 1;
  amount.innerHTML = counterCount;
  if (counter === 5) {
  	document.location.replace('https://developer.mozilla.org');
  }
}
<a onclick="counter()" href="#">I need to be clicked 5 times before I redirect</a>

<p id="amount"></p>

¿Qué estoy haciendo mal aquí?

  1. ¿Por qué mi contador no va más allá de 1?
  2. ¿Por qué no funciona el redireccionamiento?
-2
kawnah 30 oct. 2017 a las 21:27

6 respuestas

La mejor respuesta

Esto se debe a que cada vez que hace clic, reinicia su variable de nuevo a 0.

Para solucionarlo, simplemente mueva su variable afuera.

var counterCount = 0;

function counter() {
    var amount = document.getElementById("amount");
    counterCount += 1;
    amount.innerHTML = counterCount;
    if (counterCount === 5) {
        document.location.replace('https://developer.mozilla.org');
    }
}
3
Chin Leung 30 oct. 2017 a las 18:42
function counter() {
  const el =  document.getElementById("amount"); // Get the element
  const amount = el.innerHTML + 1; // Get the elements current value + 1
  el.innerHTML = amount; // Change elements value
  if (amount === 5) { // If the value is 5, redirect. This didnt work because your value never got to 5
    document.location.replace('https://developer.mozilla.org');
  }
}

Html:

<a onclick="counter()" href="#">I need to be clicked 5 times before I 
redirect</a>

<p id="amount">0</p>

Editar: la respuesta de Chin Leung es realmente mejor

0
user3743266 30 oct. 2017 a las 18:37

Restablece el contador a cero cada vez que llama a la función ya que esta línea está dentro de ella var counterCount = 0;. Muévelo fuera de la función.

var counterCount = 0;

function counter() {
  var amount = document.getElementById("amount");
  counterCount += 1;
  amount.innerHTML = counterCount;
  if (counter === 5) {
    document.location.replace('https://developer.mozilla.org');
  }
}
<a onclick="counter()" href="#">I need to be clicked 5 times before I redirect</a>

<p id="amount"></p>
0
j08691 30 oct. 2017 a las 18:30

Es porque estás definiendo la variable counterCount dentro de la función counter, cada vez que llamas a esa función, la variable se reinicializa

var counterCount = 0;
function counter() {
  
  var amount = document.getElementById("amount");
  counterCount += 1;
  amount.innerHTML = counterCount;
  if (counterCount === 5) {
  	document.location.replace('https://developer.mozilla.org');
  }
}
<a onclick="counter()" href="#">I need to be clicked 5 times before I redirect</a>

<p id="amount"></p>
0
LMoreno10 30 oct. 2017 a las 18:32

Bien, entonces está configurando el contador a 0 cada vez que ejecuta la función. Es por eso que solo va a 1. Debe definir la contravariable fuera de la función.

0
Basti 30 oct. 2017 a las 18:30

Cada vez que llamas a tu función counter() declaras que var counterCount = 0;

Puede arreglar esto para colocar su variable fuera de la función:

var counterCount = 0;

function counter() {
    var amount = document.getElementById("amount");
    counterCount += 1;
    amount.innerHTML = counterCount;
    if (counter === 5) {
        document.location.replace('https://developer.mozilla.org');
    }
}
var counterCount = 0;

function counter() {
    var amount = document.getElementById("amount");
    counterCount += 1;
    amount.innerHTML = counterCount;
    if (counter === 5) {
        document.location.replace('https://developer.mozilla.org');
    }
}
<a onclick="counter()" href="#">I need to be clicked 5 times before I redirect</a>

<p id="amount"></p>
0
The fourth bird 30 oct. 2017 a las 18:30