How to fix “Cannot read property 'style' of null”-Error in Javascript?

Question

Been trying to make it so that when you get off of "Taso 1" (stage 1) it would show Stage 2 on the main menu. Tried using the styles opacity and display but it always returned the error

Cannot read property 'style' of null at column 4

Column 4:

var jepulis = document.getElementById("je").style.opacity = "0.0";

Here is my stage 2 hyperlink that Im trying to get to show up when you get through stage 1

<a href="Taso2.html"  id="je">Taso 2</a><br>  

When you get through stage 1 it activates joo()

function joo(){ 
jepulis.style.opacity = "1";
}

Sorry if the explanation is messy, feel free to ask questions if some parts are unclear.

Answer 1

your problem is that

var jepulis = document.getElementById("je").style.opacity = "0.0";

what you are now trying to do is document.getElementById("je").style.opacity = "0.0".style.opacity = "1"; and it does not work like that fix to your problem is

var jepulis = document.getElementById("je");

function joo(){ 
jepulis.style.opacity = "1";
}

now your function joo will work

Answer 2

Having the full code would be helpful here, however using Chrome / Firefox developer console/tools will help you learn and figure out your issue. You can run your functions line by line and see where things are going wrong. In your case it looks like:

var jepulis = document.getElementById("je");

Is what you want, then set the opacity inside function calls, but is hard to tell exactly. Hit SHIFT+CMD+C on mac, or right click->inspect->console , where you can paste the body, line by line, from your function to diagnose what is going on. Hope that helps.

Answer 3

don't put "" into opacity it is an integer value, not a string

<a href="Taso2.html"   id="je">Taso 2</a>

var elem = document.getElementById('je');
  elem.style.color = 'red';
  elem.style.opacity=1;