Javascriptのクリックカウンタが1を超えていない

Question

と思われる非常に基本的なJavaScriptがあります。リンクがクリックされた回数と、5回目のクリックで新しいページにリダイレクトされます。それは次のようになります。

function counter() { 
 
    var counterCount = 0; 
 
    var amount = document.getElementById("amount"); 
 
    counterCount += 1; 
 
    amount.innerHTML = counterCount; 
 
    if (counter === 5) { 
 
    \t 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>

私はここで間違って何をしているのですか？

1. なぜ私のカウンタは1を超えていませんか？
2. なぜリダイレクトは機能しませんか？あなたがクリックするたびに、あなたは、単に外にあなたの変数を移動し、それを修正するには0

   に戻ってあなたの変数を再初期化しているためである

Answer 1

。

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'); 
    } 
} 

Answer 2

あなたがvar counterCount = 0;

と述べているあなたは、関数の外であなたの変数を配置するために、この問題を解決することができcounter()あなたの関数を呼び出す毎回：

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>

Answer 3

関数を呼び出すたびにカウンタがゼロにリセットされるのは、この行がその内部にあるためです。var counterCount = 0;です。それを関数の外に移動します。

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>

Answer 4

わかりましたので、あなたは0に、関数を実行するたびにカウンタを設定しています。つまり、それは1にしかならない理由です。関数の外部でcounter変数を定義する必要があります。

Answer 5

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> 

編集：チン・レオンの答えは実際に優れている

あなたはカウンター関数内counterCount変数を定義しているためです

Answer 6

、変数を機能あなたが呼ばれるたびに

var counterCount = 0; 
 
function counter() { 
 
    
 
    var amount = document.getElementById("amount"); 
 
    counterCount += 1; 
 
    amount.innerHTML = counterCount; 
 
    if (counterCount === 5) { 
 
    \t 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>

を再初期化されました