JavaScript Score value not increasing

Question

I'm programming a small name the picture game in HTML and JavaScript and i'm having a bit of a problem with getting the score value to increase when the user gets the answer right, the score value doesn't increase so the stars aren't changing when getting the answer correct.I have provided my code so far and any help would be greatly appreciated

<script language="javascript">
var Pics;
var Score = 0;

function btnStart_onClick() {
    document.getElementById("btnBS").disabled = false;
    document.getElementById("btnBW").disabled = false;
    document.getElementById("btnCP").disabled = false;
    document.getElementById("btnFP").disabled = false;
    document.getElementById("btnPH").disabled = false;
    document.getElementById("btnPW").disabled = false;
    document.getElementById("btnRD").disabled = false;
    document.getElementById("btnTP").disabled = false;
    document.getElementById("btnTS").disabled = false;
    document.getElementById("btnYH").disabled = false;
    document.getElementById("btnStart").disabled = true;
    document.getElementById("Ptxt").innerHTML = "What is the above symbol?"
    Pics = Math.floor(Math.random() * 10) + 1

    if (Pics == 0)
        "MapSym_blank.jpg"
    else if (Pics == 1)
        Picture.src = "MapSym_BS.jpg"
    else if (Pics == 2)
        Picture.src = "MapSym_BW.jpg"
    else if (Pics == 3)
        Picture.src = "MapSym_CP.jpg"
    else if (Pics == 4)
        Picture.src = "MapSym_FP.jpg"
    else if (Pics == 5)
        Picture.src = "MapSym_PH.jpg"
    else if (Pics == 6)
        Picture.src = "MapSym_PW.jpg"
    else if (Pics == 7)
        Picture.src = "MapSym_RD.jpg"
    else if (Pics == 8)
        Picture.src = "MapSym_TP.jpg"
    else if (Pics == 9)
        Picture.src = "MapSym_TS.jpg"
    else if (Pics == 10)
        Picture.src = "MapSym_YH.jpg"
}
function btnBS_onClick() {
    document.getElementById("btnBS").disabled = true;
    document.getElementById("btnBW").disabled = true;
    document.getElementById("btnCP").disabled = true;
    document.getElementById("btnFP").disabled = true;
    document.getElementById("btnPH").disabled = true;
    document.getElementById("btnPW").disabled = true;
    document.getElementById("btnRD").disabled = true;
    document.getElementById("btnTP").disabled = true;
    document.getElementById("btnTS").disabled = true;
    document.getElementById("btnYH").disabled = true;
    document.getElementById("btnStart").disabled = false;

    if (Pics == 1) {
        document.getElementById("Ptxt").innerHTML = "Congratulations"
        Score += 1
    }
    else document.getElementById("Ptxt").innerHTML = "Try Again"
}
    function btnBW_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 2) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnCP_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 3) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnFP_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 4) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnPH_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 5) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnPW_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 6) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnRD_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 7) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnTP_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 8) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnTS_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 9) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }
    function btnYH_onClick() {
        document.getElementById("btnBS").disabled = true;
        document.getElementById("btnBW").disabled = true;
        document.getElementById("btnCP").disabled = true;
        document.getElementById("btnFP").disabled = true;
        document.getElementById("btnPH").disabled = true;
        document.getElementById("btnPW").disabled = true;
        document.getElementById("btnRD").disabled = true;
        document.getElementById("btnTP").disabled = true;
        document.getElementById("btnTS").disabled = true;
        document.getElementById("btnYH").disabled = true;
        document.getElementById("btnStart").disabled = false;

        if (Pics == 10) {
            document.getElementById("Ptxt").innerHTML = "Congratulations"
            Score += 1
        }
        else document.getElementById("Ptxt").innerHTML = "Try Again"
    }

    if (Score == 1) {
        SOff1.src = "StarOn.gif"
    }
    if (Score == 2) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
    }
    if (Score == 3) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
    }
    if (Score == 4) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
        Soff4.src = "StarOn.gif"
    }
    if (Score == 5) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
        Soff4.src = "StarOn.gif"
        Soff5.src = "StarOn.gif"
    }
</script>

Welcome to stackoverflow. You need to tell us what specific problem you are having. Do you get an error? Do you get incorrect output? — curt
– curt, Commented Dec 7, 2016 at 18:17
sorry i'll update the post but the score just isn't increasing when pressing the correct button — Ben Arnold
– Ben Arnold, Commented Dec 7, 2016 at 19:56
You could reduce this code to 1/10th of it. Too much repetition there. — trincot
– trincot, Commented Dec 7, 2016 at 20:00

Keith.Abramo · Accepted Answer · 2016-12-07 20:04:57Z

You need to put this:

    if (Score == 1) {
        SOff1.src = "StarOn.gif"
    }
    if (Score == 2) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
    }
    if (Score == 3) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
    }
    if (Score == 4) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
        Soff4.src = "StarOn.gif"
    }
    if (Score == 5) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
        Soff4.src = "StarOn.gif"
        Soff5.src = "StarOn.gif"
    }

into its own function and call it at the bottom of all of your click events

Ex:

function btnYH_onClick() {
    document.getElementById("btnBS").disabled = true;
    document.getElementById("btnBW").disabled = true;
    document.getElementById("btnCP").disabled = true;
    document.getElementById("btnFP").disabled = true;
    document.getElementById("btnPH").disabled = true;
    document.getElementById("btnPW").disabled = true;
    document.getElementById("btnRD").disabled = true;
    document.getElementById("btnTP").disabled = true;
    document.getElementById("btnTS").disabled = true;
    document.getElementById("btnYH").disabled = true;
    document.getElementById("btnStart").disabled = false;

    if (Pics == 10) {
        document.getElementById("Ptxt").innerHTML = "Congratulations"
        Score += 1
    }
    else document.getElementById("Ptxt").innerHTML = "Try Again"

    setScore();
}


function setScore() {
        if (Score == 1) {
        SOff1.src = "StarOn.gif"
    }
    if (Score == 2) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
    }
    if (Score == 3) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
    }
    if (Score == 4) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
        Soff4.src = "StarOn.gif"
    }
    if (Score == 5) {
        SOff1.src = "StarOn.gif"
        SOff2.src = "StarOn.gif"
        Soff3.src = "StarOn.gif"
        Soff4.src = "StarOn.gif"
        Soff5.src = "StarOn.gif"
    }
}

excellent that's exactly what i needed and works fine thank you!

Collectives™ on Stack Overflow

JavaScript Score value not increasing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related