按钮控制javascripts中的功能

Question

按钮控制javascripts中的功能

我一直在制作简单的Javascript程序,我将为不同的网站为我的朋友运行,我一直在尝试使用按钮制作一个统治风格(使命召唤游戏模式)程序.我看过一个网站,并尝试使用设置的间隔,但我无法弄清楚如何让按钮访问脚本.

这是我的代码:

<!DOCTYPE html>
<html>
<body>
    <p id = "blue"></p>
    <p id = "red"></p>
    <button onclick="StartA()">Start for Red</button>
    <button onclick="StopA()">Stop for red</button>
    <button onclick="StartB()">Start for Blue</button>
    <button onclick="StopB()">Stop for Blue</button>
    <script>
    var startRed;
    var startBlue;
    var r=1;
    var b=1;
    var startA = function(){
        var startRed = setInterval(function(){redscore++};,3000)
    };
    var startB = function(){
        var startBlue = setInterval(function(){bluescore++};,3000)
    };
    var StopA = function(){
        clearInterval(startRed);
    }; 
    var StopB = function() {
        clearInterval(startBlue);
    };
    document.getElementById("blue").innerHTML=bluescore;
    document.getElementById("red").innerHTML=redscore;
    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dan*_*nez 6

JavaScript区分大小写.你与案件不一致.传统上,JavaScript函数和变量以小写字母开头,并且是驼峰式的.
您正在重新初始化已在全局范围中初始化的函数中的变量.
您没有在每次分数更改时更新ui,只是在开始时.

下面是应该按照您的意图运行的更新代码.把你的得分老师变成一个班级可能是值得的,因为他们是多余的.

更新了Html

<p id="blue"></p>
<p id="red"></p>
<button onclick="startA()">Start for Red</button>
<button onclick="stopA()">Stop for red</button>
<button onclick="startB()">Start for Blue</button>
<button onclick="stopB()">Stop for Blue</button>

Run Code Online (Sandbox Code Playgroud)

更新了javaScript

var startRed;
var startBlue;
var bluescore = 1;
var redscore = 1;

function startA() {

    stopA();
    startRed = setInterval(function () {
        redscore++;
        updateUI();
    }, 3000)
};

function startB() {
    stopB();
    startBlue = setInterval(function () {
        bluescore++;
        updateUI();
    }, 3000)
};

function stopA() {
    clearInterval(startRed);
};

function stopB() {
    clearInterval(startBlue);
};

function updateUI() {
    document.getElementById("blue").innerHTML = bluescore;
    document.getElementById("red").innerHTML = redscore;
}

updateUI();

Run Code Online (Sandbox Code Playgroud)

的jsfiddle

***JavaScript**区分大小写.你与案件不一致.传统上,**javaScript**...*只是唠叨你:) (2认同)

归档时间：	12 年，4 月前
查看次数：	98 次
最近记录：	12 年，4 月前