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>

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

Answer 2

这里有两个主要问题：

不要在if / else块中定义函数，这是不可靠的。
每次点击发生的唯一事情就是让计数器递增，没有别的。

我相信你想要这样的东西：

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代码只在加载时执行一次，如下所示：

用户加载页面
代码（if-else-block）被执行，但由于计数器为0
用户点击按钮，计数器计数，但if-else-block将不会再次执行

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

更改<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
    }
}

如何使用JavaScript计算点击次数？

4 个答案: