HTML file won't show my javascript variable

Question

I've written a javascript function with some variables, i've tried to test it to see if variables would show in my HTML document but they wont and i have no idea why. Specifically, i'm trying to insert variable currentScore which is set to 0 at the beginning, so it should show 0 in a textbox, but it doesnt appear there.

Here is my javascript :

var who = 0;
var decision = 0;
var diceOne = 0;
var diceTwo = 0;
var currentScore = 0;
player playerAI = new player;
player playerOne = new player;
document.getElementById('currentScore').value = currentScore;

function rollDice() {
diceOne = Math.round(6 * Math.Random() + 1);
diceTwo = Math.round(6 * Math.Random() + 1);
}
function mainFunction() {
    playerAI.playing = true;
    playerOne.playing = true;
    while (playerAI.playing == true && playerOne.playing == true) {
        makeMove();
    }
}
function makeMove() {
    if (who == 0) {
        aiStrat();
        game();
    }
    else {
        game();
    }
}
function game() {
    if (decision == 1) {
        rollDice();
        if (diceOne != 1 && diceTwo != 1){
            currentScore += diceOne + diceTwo;
            decision = 0;
            makeMove();
        }
        if (diceOne == 1 || diceTwo == 1){
            currentScore = 0;
            decision = 0;
            who = 1 - who;
            makeMove();
        }
        if (diceOne == 1 && diceTwo == 1) {
            currentScore = 0;
            if (who == 0) {
                playerAI.totalScore = 0;
            }
            else {
                playerOne.totalScore = 0;
            }
            decision = 0;
            who = 1 - who;
            makeMove();
        }
    }
    if(decision == -1) {
        if (who == 0){
            playerAI.totalScore += currentScore;
            playerAI.checkScore();
        }
        else {
            playerOne.totalScore += currentScore;
            playerOne.checkScore();
        }
        currentScore = 0;
        decision = 0;
        who = 1 - who;
    }       
}

function aiStrat() {
    if (playerAI.totalScore < 60) {
        if (currentScore < 30) {
            decision = 1;
        }
        else {
            decision = -1;
        }
    }
    if (playerAI.totalScore >= 60 && playerAI.totalScore < 80) {
        if (currentScore < 20){
            decision = 1;
        }
        else {
            decision = -1;
        }   
    }
    if (playerAI.totalScore >= 80){
        if (currentScore < 10) {
            decision = 1;
        }
        else {
            decision = -1;
        }
    }
}


var player {
    var totalScore = 0;
    var playing = true;
    function checkScore() {
        if (totalScore >= 100) {
            playing = false;
        }
    };
};

And my HTML document is this:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="BigPig.css">
        <script type="text/javascript" src="VorgurakendusedKD1\Vorgurakendused.js" ></script>
    </head>
    <body onload="javascript:mainFunction()">

        <div class="centered" type="text/javascript">

            <h1>BIG PIG</h1>
            <button><input type="button" value="START FROM BEGINNING" onclick="mainFunction();">
            <span></span></button>
            <br>
            <button><span>GREEN BUTTON</span></button>
            <br>
            <button><span>RED BUTTON</span></button>
            <br>
            <output class="textbox" type="text/javascript" id="currentScore">CURRENTSCORE:         
            </output>
            <br>
            <output class="textbox" type="text">CPU SCORE: </output>
            <br>
            <output class="textbox" type="text">PLAYER SCORE: </output>
            <br>
            <p>Player versus computer</p>
            <br>
            <p id="currentScore"></p>
        </div>
    </body>
</html>

Answer 1

Here: document.getElementById('currentScore').value = currentScore; you try to find an element before it has loaded, and that's why you can't assign a value to it.

Try putting document.getElementById('currentScore').value = currentScore; inside your onload-function, mainFunction()

HTML file won't show my javascript variable

Question

1 answers

solution1
0 ACCPTED 2014-09-27 19:44:52

HTML file won't show my javascript variable

Question

1 answers

solution1 0 ACCPTED 2014-09-27 19:44:52

solution1
0 ACCPTED 2014-09-27 19:44:52