如何使用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 
    } 
}