Changing css using javascript works inline but not from header

Question

I have a div area that I want to change the css after the page loads. My HTML looks like the following

<div class='myArea'>

</div>
<script type="text/javascript">
          $('.myArea').css('background-color',"red");
</script>

And it works. But if I move this to an external js file and reference the js file from the header, this doesn't work. The following is the js code in the external file -

function init(){
      $('.myArea').css('background-color',"blue");

  }
window.addEventListener('load', init, false);

What might be the reason behind this

Are you executing your JavaScript before the page has finished loading? And if you're using jQuery, which it looks like, why are you using window.addEventListener('load', init, false);? — j08691
– j08691, Commented Oct 1, 2014 at 16:06
Keep in mind that the reference to the external js file must be placed after the JQuery reference, because it uses it... — LcSalazar
– LcSalazar, Commented Oct 1, 2014 at 16:08
Put your script at the bottom of the body tag. That will be 'after' the page loads. Anything in the header is before the html content has loaded. — Andrew Ice
– Andrew Ice, Commented Oct 1, 2014 at 16:19
@j08691, I think adding the load event listener makes sure that the page finishes loading before the js execution, is it? In my production, I was not initially planning to use jquery, but will use the $ function as a utility function. — Shafi
– Shafi, Commented Oct 1, 2014 at 21:37

Ragnar · Accepted Answer · 2014-10-01 16:08:05Z

1

You only have to put the code inside jQuery document ready function, $() is a shortcut to that function:

$(function(){
    $('.myArea').css('background-color',"red");
});

answered Oct 1, 2014 at 16:08

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

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

3 Comments

Shafi Over a year ago

Your solution works. Can you please explain, why the add event listener is not working and your solution working?

Brian Dillingham Over a year ago

this is the same as using ready() you cant bind events to elements that havent been rendered. ready() is an event on the document that fires when the document has loaded. read more here

Ragnar Over a year ago

Is as @Brian says, $() is a shortcut to $(document).ready()

Dave · Accepted Answer · 2014-10-01 16:07:33Z

0

Try this instead?:

window.onload = function() {
    $('.myArea').css('background-color',"red");
}

Or, if you're already using jQuery, you could use their document ready(): http://api.jquery.com/ready/

$( document ).ready(function() {
   $('.myArea').css('background-color',"red");
});

answered Oct 1, 2014 at 16:07

Dave

29.2k26 gold badges117 silver badges184 bronze badges

Collectives™ on Stack Overflow

Changing css using javascript works inline but not from header

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related