Question

I have a light switch image on my website. It triggers a function (using onClick) which makes the whole wrapper div have an opacity of 0.2 giving the effect of lights being off.

So the switch is clicked and the lights are “off”, however I cannot work out how to turn them back on.

function lightSwitch()
{
    document.getElementById("switchoff").style.opacity = '0.2';
}

I am very new to JavaScript so I am confident the solution is simple.

Answer 1

function lightSwitch()
{
    var el = document.getElementById("switchoff"),
        opacity = el.style.opacity;

    if(opacity == '0.2')
        el.style.opacity = '1';
    else
        el.style.opacity = '0.2';
}

note – this is not tested, the actual value may differ (“.2” or “0.2”) – you need to test”