Why isn't my css style changing?

Question

I am trying to change the color of the text using javascript but something as simple as this isnt working and I dont understand why..

<!DOCTYPE html>

<html>
   <script>
      var y = document.getElementById('ya');
       y.style.color = "red";
   </script>

<p style="font-size:100px;" id="ya">
    hi
</p>

</html>

[Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Jonathan Lonowski, Oct 20 '16 at 04:26
Thanks @JaromandaX. This was the problem and now I understand why. The element was being called before the rest of the page even got to load giving an error saying the element was null. Thanks to all! — Juan, Oct 20 '16 at 04:30

score 4 · Answer 1 · edited Oct 20 '16 at 04:31

4

Try this, it's working. This is because the script now runs after the DOM element renders.

<p style="font-size:100px;" id="ya">
    hi
</p>

<script>
  var y = document.getElementById('ya');
  y.style.color = "red";
</script>

edited Oct 20 '16 at 04:31

Niles Tanner

3,438
2
13
26

answered Oct 20 '16 at 04:28

Khorshed Alam

2,379
19
30

score 1 · Answer 2 · answered Oct 20 '16 at 04:30

Because the javascript was loaded before your p tag. If you check the console you will see an error "TypeError: Cannot read property 'style' of null.

<!DOCTYPE html>

<html>
   
<p style="font-size:100px;" id="ya">
    hi
</p>
  <script>
      var y = document.getElementById('ya');
       y.style.color = "red";
   </script>

</html>

score 1 · Answer 3 · answered Oct 20 '16 at 06:14

The element id you were trying to find wasn’t in the DOM as your script runs before the DOM element renders.

Your DOM position should come first then Script to manipulate the DOM element.

There are two solution for this problem :

1. Move your Script below the DOM.

<p style="font-size:100px;" id="ya">
    hi
</p>
<script>
  var y = document.getElementById('ya');
  y.style.color = "red";
</script>

2. use jQuery document.ready()

<p style="font-size:100px;" id="ya">
    hi
</p>
<script>
 $(document).ready(function() {
   var y = document.getElementById('ya');
   y.style.color = "red";
 });
</script>

score 0 · Answer 4 · answered Oct 20 '16 at 04:31

An Element with id='ya' is undefined at the time you wrote the JavaScript. Put the JavaScript in your head and use onload = function(){/* code here */} or addEventListener('load', function(){/* code here */}) and it should work every time (Well maybe not the first way if you have multiple onloads. But there's a way around that by assigning onload to a var then executing after the other onload). Really I would use External JavaScript, so it's stored in your Clients cache, this will improve site performance. Just make sure you change your file name if you update your JavaScript, if your site is deployed, or just clear your cache if your still working on it.

score 0 · Answer 5 · answered Oct 20 '16 at 05:32

0

first you can check jQuery.min.js in included in your file your code is fine.

test this one

   <script>
      var y = document.getElementById('ya');
       y.css("color", "red");
   </script>

answered Oct 20 '16 at 05:32

Milan Gajjar

693
2
14
22

Why isn't my css style changing?

5 Answers5