Uncaught Typeerror: Cannot read Property 'style' of null

Asked

Viewed 448 times

0

Normally I will Google first, but I searched and couldn’t find a valid solution.

I’m making a game of guessing colors of the Coursera Javascript course. And it’s working, but when I try to define backgroundColor of <body> returns me the following error:

"Uncaught Typeerror: Cannot read Property 'style' of null"

Do any of you have any idea how to fix this?

Code

do_game();

function do_game() {
    //lower or higher
    // =-=-=-=- Get array of colors
    var colors = getColors();
    // =-=-=-=- Get Randomize number based on the number of colors
    var colorId = getRandomNumber(colors.length - 1);
    // =-=-=-=- Show Answer to the Tester
    alert(getAnswer(colors[colorId]));
    // Loop until find the answer
    var userColorId = 0;
    var times = 0;
    while (colorId != userColorId) {
        times++;
        //get userColorID       
        var userColor = prompt(getQuestion());
        userColorId = getColorId(colors, userColor);
        // Color not in the Array
        if (userColorId === -1) {
            alert(getNotListCollorError());
        }
        //Color 
        //alert(colorId + ">" + userColorId);
        if (colorId > userColorId) {
            alert(getListCollorError('lower'));
        } else if (colorId < userColorId) {
            alert(getListCollorError('higher'));
        } else if (colorId == userColorId) {
            var color = colors[userColorId];
            alert(color);
            setBackgroundColor(color);
            console.log(color);
            //alert(getSucessMessage(times));
        }
    }
}

function getColorId(array, color) {
    return array.indexOf(color);
}

function setBackgroundColor(name_of_color) {    
    myBody = document.getElementsByTagName("body")[0];
    myBody.style.backgroundColor = color;
    document.body.style.backgroundColor = name_of_color;    
}

function getColors() {
    var colors = ['blue', 'cyan', 'gold', 'green', 'magenta', 'orange', 'red', 'white', 'yellow'];
    return colors;
}

function getQuestion() {
    var txtQuestion = 'I am thinking of one of these colors:' + '\n\n' + getColors() + '\n\n' + 'What color am I thinking of?';
    return txtQuestion;
}

function getListCollorError(position) {
    var txtMensage = "Sorry your guess is not correct!" + '\n\n' + "Hint: your color is alphabetically " + position + " than mine." + '\n\n' + "Please try again.";
    return txtMensage;
}

function getNotListCollorError() {
    var txtMensage = "Sorry, I dont recognize your color." + "\n\n" + "Please try again.";
    return txtMensage;
}

function getSucessMessage(times) {
    var txttimes = (times > 1) ? 'guesses' : 'guess';
    var txtMensage = "Congratulations! You have guessed the color!" + "\n\n" + "It took you " + times + " " + txttimes + "\n\n" + "You can see the color in the background";
    return txtMensage;
}

function getAnswer(answer) {
    return "The answer is: " + answer;
}

function getRandomNumber(maxnumber) {
    return Math.round(Math.random() * maxnumber);
}
<style>
    background{
        background-color: aqua;
    }
</style>
<script src="game.js">
</script>
<body>
    <h1>
        Color Guessing Game
    </h1>
</body>

javascript html

  • I took the liberty of translating exactly with the text you made available on the link, but feel free to edit

  • Thanks @Arturotemplário was about to change.

  • @Renatolacerda I put the code here in the question, please see if it’s right.

  • @LINQ, yes you are obliged!

  • But the error it gives when running here on the site is not the same as what you say in the post.

  • i run on Chrome, so I put it in codeshare. because the error happens when you try to assign the color in the setBackgroundColor Function

  • I found the mistake. was putting to run straight from the javascript file (game.js) and had to call in html (<body onload="do_game();">); I do not know why this happens but quiet.

Show 2 more comments
No answers

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.