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

您的 JavaScript 代码在加载时只执行一次，如下所示：

1. 用户加载页面
2. 代码（if-else-block）被执行，但由于计数器为 0，所以什么也不做
3. 用户点击按钮，计数器计数，但不会再次执行 if-else-block

您必须确保每次用户单击按钮时都会调用 if-else-block。

更改您的 onClick 事件<li>以调用函数（我将在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
    }
}

Answer 2

这里有两个主要问题：

1. 不要在 if/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

试试这个代码：

<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>

我不确定你在那里做了什么，但是在你创建你的函数之后你应该调用它，所以我在上面所做的我创建了函数，然后当你点击 Next 链接时，它会添加一个到 clicks 变量并调用将确定如何处理点击次数的函数 check()。