Javascript Check if number = variable

Question

var Period =1;

        if(Period==1){
            document.getElementById("Main").style.backgroundImage = "url('Main_Background_Grass_1.png')";
        }

For some reason this wont work. The image location is correct but im sure there is something wrong.

im pretty new to javascript

heres more code

<script type="text/javascript">

        var Knowledge = 0;
        var Period =1;

        if(Period==1){
            document.getElementById("Main").style.backgroundImage = "url('Main_Background_Grass_1.png')";
        }

</script>

<div id="Main">

    <div id="Toolbar">
        Oh noes! Something Went Wrong
    </div>
</div>

the image wont show up at all

Please define "wont work". Any errors in the console? Background image doesn't appear? A wrong image appears? Something else? — Teemu
– Teemu, Commented Jul 23, 2015 at 17:53
Browsers have consoles that display error messages. In chrome, try Ctrl+J. In Firefox, Ctrl+K. — Domino
– Domino, Commented Jul 23, 2015 at 17:54

baao · Accepted Answer · 2015-07-23 17:56:27Z

4

The element isn't found at the time you call your function, place the javascript right before the closing body tag

<div id="Main">

    <div id="Toolbar">
        Oh noes! Something Went Wrong
    </div>
</div>

<script type="text/javascript">

        var Knowledge = 0;
        var Period =1;

        if(Period==1){
            document.getElementById("Main").style.backgroundImage = "url('Main_Background_Grass_1.png')";
        }

</script>

answered Jul 23, 2015 at 17:56

baao

73.6k18 gold badges152 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Domino · Accepted Answer · 2015-07-23 18:03:11Z

1

Uncaught TypeError: Cannot read property 'style' of null
That's because the element wasn't loaded yet. There are two ways to make sure a code runs only when a page is ready. One is to put the code at the bottom of the body, so the page has already been loaded. The other is to put it in an event listener for the window load event:

<script type="text/javascript">
  window.addEventListener("load", function(e) {

  // code goes here

  });
</script>

Which one is the best practice? That's an eternal debate. I prefer the listener so that the code is all at the top, but many would disagree.

answered Jul 23, 2015 at 18:03

Domino

6,8781 gold badge37 silver badges61 bronze badges

Collectives™ on Stack Overflow

Javascript Check if number = variable

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related