如何使用JavaScript計算點擊次數？

Question

我試圖做出反擊，將計次的按鈕被點擊量，但由於某些原因，實在不行，JavaScript代碼低於：

var clicks = 0; 
if (clicks==1) 
{ 
function changeDiv() 
{ 
    document.getElementById('body').style.display = "none"; // hide body div tag 
    document.getElementById('body1').style.display = "block"; // show body1 div tag 
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked 
} 
} 

else{ 
if (clicks==2) 
{ 
    function changetwoDiv() 
    { 
     document.getElementById('body1').style.display = "none"; 
     document.getElementById('body2').style.display = "block"; 
    } 
} 
} 

的HTML代碼如下：

<div class="footerlinks"> 
<ul> 
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li> 
    <li class="link2" onClick="clicks++">&gt;&gt;Next</li> 

</ul> 

Answer 1

試試這個代碼：

<script type="text/javascript"> 
var clicks = 0; 

function check() { 
    if (clicks==1) { 
     changeDiv(); 
    } else if(clicks==2) { 
     changetwoDiv(); 
    } 
} 

function changeDiv() 
{ 
    document.getElementById('body').style.display = "none"; // hide body div tag 
    document.getElementById('body1').style.display = "block"; // show body1 div tag 
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked 
} 

function changetwoDiv() 
{ 
    document.getElementById('body1').style.display = "none"; 
    document.getElementById('body2').style.display = "block"; 
} 
</script> 

<div class="footerlinks"> 
<ul> 
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li> 
    <li class="link2"><a href="#" onclick="clicks++;check();">&gt;&gt;Next</a></li> 

</ul> 

我不知道你做了什麼，可你創建後，你的功能，你應該稱呼它，所以我做了什麼上面我創建這些函數，然後當你點擊下一個鏈接時，它會將一個添加到clicks變量，並調用函數check（）來確定如何處理點擊次數。

Answer 2

兩個主要問題在這裏：

1. 不要定義功能，如果內/ else塊，這是不可靠的。
2. 每次點擊發生的唯一事情是讓計數器遞增，沒有別的。

我相信你想是這樣的：

var clicks = 0; 

function clicked() { 
    clicks++; 
    if (clicks==1) { 
     changeDiv(); 
    } else if (clicks==2) { 
     changetwoDiv(); 
    } 
} 

function changeDiv() { 
    document.getElementById('body').style.display = "none"; // hide body div tag 
    document.getElementById('body1').style.display = "block"; // show body1 div tag 
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked 
} 

function changetwoDiv() { 
    document.getElementById('body1').style.display = "none"; 
    document.getElementById('body2').style.display = "block"; 
} 

HTML：

<div class="footerlinks"> 
<ul> 
    <li class="numlink1"><a href="index.html" target="_blank">&lt;&lt;Back</a></li> 
    <li class="link2" onClick="clicked()">&gt;&gt;Next</li> 

</ul> 

Answer 3

試試這個爲你的javascript：

var clicks = 0; 

function next_clicked() { 

    clicks++; 

    if(clicks == 1) { changeDiv(); } 
    else if(clicks == 2) { changetwoDiv(); } 

} 

function changeDiv() 
{ 
    document.getElementById('body').style.display = "none"; // hide body div tag 
    document.getElementById('body1').style.display = "block"; // show body1 div tag 
    document.getElementById('innerbody').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked 
} 

function changetwoDiv() 
{ 
    document.getElementById('body1').style.display = "none"; 
    document.getElementById('body2').style.display = "block"; 
} 

，然後在您的html代碼：

<li class="link2" onClick="javascript:next_clicked()">&gt;&gt;Next</li> 

Answer 4

你的JavaScript代碼被執行，只有當它的加載一次，這樣的：

1. 用戶加載頁面
2. 代碼（if-else語句塊）被執行，但由於計數器沒有什麼是0
3. 用戶點擊按鈕，計數器的計數值，但如果其他區塊將不會被再次執行

你必須要確保的if-else塊被稱爲每次用戶點擊該按鈕。

更改您的<li>的onClick事件來調用一個函數（我將在下面稱它爲count()）。然後在你的代碼中創建這個函數，並把相關的東西放在那裏。

HTML：

<li class="link2" onClick="count()">&gt;&gt;Next</li> 

的JavaScript：

var clicks = 0; // This needs to stay outside the function! 

function count() { 
    clicks++; 
    if (clicks == 1) { 
     // Do something 
    } else if (clicks == 2) { 
     // Do something else 
    } 
}