Fatal编程技术网
  • javascript/
  • JavaScript：计算多个按钮的按钮点击总数？

JavaScript：计算多个按钮的按钮点击总数？

javascript html button

JavaScript：计算多个按钮的按钮点击总数？,javascript,html,button,Javascript,Html,Button,我正试图根据我需要的点击次数来改变背景图片（我知道代码不是很好，因为我必须为每张图片声明，但我只需要4张图片，因为3个按钮中的任何一个只需要总共点击3次按钮）。基本上，我有一组3个按钮，我希望我的代码能够根据这三个按钮的总点击量来更改背景图像。如果您愿意，请建议使用jQuery，但我不想使用jQuery，因为我宁愿先习惯JavaScript。JavaScript函数似乎不算什么，它只对一个按钮起作用。谢谢！：） var noOfInputs=0； 功能按钮\u单击（）{ noofinput++

我正试图根据我需要的点击次数来改变背景图片（我知道代码不是很好，因为我必须为每张图片声明，但我只需要4张图片，因为3个按钮中的任何一个只需要总共点击3次按钮）。基本上，我有一组3个按钮，我希望我的代码能够根据这三个按钮的总点击量来更改背景图像。如果您愿意，请建议使用jQuery，但我不想使用jQuery，因为我宁愿先习惯JavaScript。JavaScript函数似乎不算什么，它只对一个按钮起作用。谢谢！：）


var noOfInputs=0；
功能按钮\u单击（）{
noofinput++；
如果（noOfInputs==“0”）{
window.document.getElementById（'myImage'）.src=“Number0.jpg”；
}
如果（noOfInputs==“1”）{
window.document.getElementById（'myImage'）.src=“Number1.jpg”；
}
如果（noOfInputs==“2”）{
window.document.getElementById（'myImage'）.src=“Number2.jpg”；
}
如果（noOfInputs==“3”）{
window.document.getElementById（'myImage'）.src=“Number3.jpg”；
}
}
1.
2.
3.
取消
请对我放松点…我很容易犯初学者的错误（因为我是初学者）。非常感谢所有帮助：）

只要在用户单击按钮时调用您的函数即可：

<button onclick="buttons_click()">Cancel</button>

取消
编辑：哦，还有，用实数（0、1、2等）替换所有字符串（“0”、“1”等）中的数字。这是因为
==
将检查值和类型。因此，如果两个变量得到相同的值（JS中的1==“1”，是的…），但类型不同，它将返回FALSE

建议的解决方案：

可以将
按钮\u单击
功能指定为回调
按钮元素的单击事件的处理程序如下：


<button onclick="button_click()">Cancel</button>



此代码将更改计数器映像


    <!DOCTYPE html>
    <html>
    <body>

        <script language="JavaScript" type="text/javascript">

            var noOfInputs = 0;
            function buttons_click() {

                noOfInputs++;

                if (noOfInputs === 0) {
                    window.document.getElementById('myImage').src = "Number0.jpg";
                }

                if (noOfInputs === 1) {
                    window.document.getElementById('myImage').src = "Number1.jpg";
                }

                if (noOfInputs === 2) {
                    window.document.getElementById('myImage').src = "Number2.jpg";
                }

                if (noOfInputs === 3) {
                    window.document.getElementById('myImage').src = "Number3.jpg";
                }

            }

        </script>

        <button onclick="buttons_click()">1</button>
        <button onclick="buttons_click()">2</button>
        <button onclick="buttons_click()">3</button>

        <img id="myImage" src="Number0.jpg" style="width: 400px">

        <button onclick="document.getElementById('myImage').src='Number0.jpg';noOfInputs=0;">Cancel</button>

    </body>
    </html>




var noOfInputs=0；
功能按钮\u单击（）{
noofinput++；
if（noofinput==0）{
window.document.getElementById（'myImage'）.src=“Number0.jpg”；
}
if（noofinput==1）{
window.document.getElementById（'myImage'）.src=“Number1.jpg”；
}
if（noofinput==2）{
window.document.getElementById（'myImage'）.src=“Number2.jpg”；
}
if（noofinput==3）{
window.document.getElementById（'myImage'）.src=“Number3.jpg”；
}
}
1.
2.
3.
取消

哪些代码有效，哪些代码无效？你在等我们做什么？你能说得更清楚一点吗？我正试着让你点击的功能按钮发挥作用。很抱歉。如果
语句中的条件总是
false
，则您正在使用
==
将数字与字符串进行比较。修复后需要做的是每次单击按钮时调用
按钮\u click
功能。您可以在这里找到一个很好的示例
onclick=“document.getElementById（'myImage'）.src='Number0.jpg'
-注意，您不会在这里将
noofinput
重置为
0
。非常感谢大家！修复比我预期的要容易得多，我认为是整个函数出错了。（我知道“谢谢”不应该出现在这里，但我必须在某个地方感谢所有人！！！我明白了…我发现这就是导致Vindhyachal的代码工作的原因，而我的代码没有。啊哈，是的，他给了你解决方案，我给了你解决方案工作的原因；）

var noOfInputs = 0;
function buttons_click () {
  noOfInputs++;

// N.B. clicking more than 3 times will cause the the code to look for a "Number4.jpg"
//You can handle this by resetting noOfInputs if it exceeds 3 as follows:

  if(noOfInputs > 3)
    noOfInputs = 0;

  var srcImageLink = "Number" + noOfInputs + ".jpg"
  window.document.getElementById('myImage').src = srcImageLink;
}



    <!DOCTYPE html>
    <html>
    <body>

        <script language="JavaScript" type="text/javascript">

            var noOfInputs = 0;
            function buttons_click() {

                noOfInputs++;

                if (noOfInputs === 0) {
                    window.document.getElementById('myImage').src = "Number0.jpg";
                }

                if (noOfInputs === 1) {
                    window.document.getElementById('myImage').src = "Number1.jpg";
                }

                if (noOfInputs === 2) {
                    window.document.getElementById('myImage').src = "Number2.jpg";
                }

                if (noOfInputs === 3) {
                    window.document.getElementById('myImage').src = "Number3.jpg";
                }

            }

        </script>

        <button onclick="buttons_click()">1</button>
        <button onclick="buttons_click()">2</button>
        <button onclick="buttons_click()">3</button>

        <img id="myImage" src="Number0.jpg" style="width: 400px">

        <button onclick="document.getElementById('myImage').src='Number0.jpg';noOfInputs=0;">Cancel</button>

    </body>
    </html>