Question

我正在尝试根据我需要的点击次数来改变背景图像（我知道代码不是很好，因为我必须说明每张图片，但我只需要4张图片，因为只有3次按钮点击从任何3个按钮都需要）。基本上，我有一组3个按钮，我希望我的代码可以根据所有三个点击的总点击量来更改背景图像。如果你愿意，请建议jQuery，但我不想使用jQuery，因为我宁愿习惯JavaScript。 JavaScript函数似乎没有任何重要性，它只适用于一个按钮。谢谢！：）

    <!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>1</button>
    <button>2</button>
    <button>3</button>

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

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

    </body>
    </html>

请放轻松我...我很容易出现初学者错误（因为我是初学者）。非常感谢所有帮助：）

Answer 1

只需在用户点击按钮时调用您的函数：

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

编辑：哦，还要用实数（0,1,2等）替换所有数字 - 字符串（“0”，“1”等）。这是因为===会检查值和类型。因此，如果2个变量得到相同的值（在JS中为1 ==“1”，是......）但不是同一类型，则返回FALSE。

Answer 2

建议的解决方案：可以将buttons_click函数指定为回调按钮元素在click事件上的处理程序如下：＆lt; button onclick =“button_click（）”＆gt;取消＆lt; / button＆gt; 额外提示：您还可以通过构建要传递给src属性的字符串来缩短button_click代码以显示图像： var noOfInputs = 0; function buttons_click（）{ noOfInputs ++; // N.B.单击3次以上将导致代码查找“Number4.jpg” //你可以通过重置noOfInputs来处理这个问题，如果它超过3，如下所示： if（noOfInputs＆gt; 3） noOfInputs = 0; var srcImageLink =“Number”+ noOfInputs +“.jpg” window.document.getElementById（'myImage'）。src = srcImageLink; }

Answer 3

此代码将更改计数器图像。

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

JavaScript：从多个按钮计算按钮点击总数＃

3 个答案: