Javascript Targeting Inside Conditional Statement

Question

I have two images...

 function leftMove(el) { if (el.className == "la") { el.className = "la1"; getElementById(ra).className = "ra1"; } else { el.className = "la"; getElementById(ra1).className = "ra"; } } 

 .la { position: absolute; bottom: 370px; opacity: .5; } .ra { position: absolute; bottom: 370px; left: 1637px; opacity: .5; } .la1 { position: absolute; bottom: 370px; left: 500px; opacity: 1; } .ra1 { position: absolute; bottom: 370px; left: 1137px; opacity: 1; } 

 <img src="img.png" width="290" height="228" id="la" class="la" onclick="leftMove(this)"> <img src="img.png" width="290" height="228" id="ra" class="ra" onclick="rightMove(this)"> 

...that I am trying to modify. Specifically, I am trying to change the class of both images when either image is clicked. An example of the javascript I am using is:

The end goal would be to have both images reference new CSS, shown here:

If I do it correctly, both images should move and change opacity. For some reason, only the image with the "la"/"la1" class moves and changes opacity, while the "ra"/"ra1" image does nothing. I'm pretty sure this is because my javascript is broken, but I don't know why. Any advice would be greatly appreciated.

This is the first code I've written, so please be gentle if I'm being obtuse.

Thanks for taking the time. :)

Answer 1

You need to pass a string to getElementById and call the function on document :

document.getElementById("ra").className = "ra1";
...
document.getElementById("ra1").className = "ra";