Buttons controlling functions in javascripts

Question

I have been making simple Javascript programs that I will run with different websites for my friends, and I have been trying to make a domination style (call of duty gamemode) program using buttons. I have looked at a website and have tried using the set intervals for it but I can't figure out how to make the buttons access the script.

Here is my code:

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

You have syntax errors inside both calls to setInterval, move the semicolon inside the call to the end of the line. Also remove your var declarations inside startA and startB. And, what @AndreCalil said. — bfavaretto, Aug 08 '13 at 14:27

Daniel Gimenez · Accepted Answer · 2013-08-08T14:43:40.840

6

JavaScript is case sensitive. You are not consistent with case. Traditionally, JavaScript functions and variables start with a lower case letter and are camel cased.
You were reinitializing variables in functions that were already initialized in the global scope.
You weren't updating the ui with each score change, just at the start.

Below is updated code that should run as you intend. It might be worth while to turn your score keepers into a class, since they are redundant.

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

Updated 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();

jsFiddle

edited Aug 08 '13 at 14:43

answered Aug 08 '13 at 14:36

Daniel Gimenez

18,530
3
50
70

2

***JavaScript** is case sensitive. You are not consistent with case. Traditionally, **javaScript**...* Just nagging you :) – bfavaretto Aug 08 '13 at 14:37
I will fix that. Thanks :-) – Daniel Gimenez Aug 08 '13 at 14:38
Great answer - I think a big difference between your answer code and the OP's Javascript is that you have named functions, whereas the question code used anonymous functions assigned to variables. Does this functionally change how everything operates? – Mattygabe Aug 08 '13 at 14:42
IMO it doesn't change how everything operates, it just does it better and is more scalable. Great answer, +1 – Frederik.L Aug 08 '13 at 14:53
[There is a difference](http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname), but it doesn't matter in this case. – bfavaretto Aug 08 '13 at 17:33

score 0 · Answer 2 · answered Aug 08 '13 at 14:39

The following code is what you're looking for. The changes are:

Function names now match (startA() => StartA(), startB() => StartB(), etc.)
The <p> elements are updated within the interval (otherwise, they never update)
Remove local vars from within functions

You can view a jsfiddle here: http://jsfiddle.net/5tcNb/

<body>
    <script>
    var startRed, startBlue;
    var redscore = 0, bluescore = 0;
    var r = 1, b = 1;

    function StartA() {
        startRed = setInterval(function() {
            redscore++;
            document.getElementById("red").innerHTML = redscore;
        }, 3000);
    };
    function StartB() {
        startBlue = setInterval(function() {
            bluescore++;
            document.getElementById("blue").innerHTML = bluescore;
        }, 3000);
    };
    function StopA() {
        clearInterval(startRed);
    }; 
    function StopB() {
        clearInterval(startBlue);
    };
    </script>

    <p id="blue">0</p>
    <p id="red">0</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>
</body>

Buttons controlling functions in javascripts

2 Answers2

Updated Html

Updated javaScript

jsFiddle