Question

This might be a dumb question but I can’t get this super simple script to work.
I need a button that will reduce opacity by .1. every time it is clicked.

I’ve tried all of these.

x.style.opacity-.3; //This doesn't work. Doesn't do anything.
x.style.opacity=.3; //This gives me an opacity of .3. 
x.style.opacity-=.3; //This gives an opacity of 0. Why?
x.style.opacity--; //This will give opacity of 0 as expected.

I even tried this:

var timesTen = x.style.opacity*10;
timesTen--;
timeTen/10;
x.style.opacity=timesTen; // This gives opacity of 0;

I would expect the answer to this problem to have something to do with a lack of understanding of the operators. But I’ve looked trough tons of arithmetic tutorials and they all seem full of integer examples that work perfectly fine for me. I’ve even copy pasted some of them and changed the numbers only to find that they stop working. I’m sorry if this is a noob question (As I am sure it is). Thank you

Answer 1

When I tested, you have to set opacity first, then you can read it to change it.

​<div id="x" style="opacity:1.0">Hello</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​x.style.opacity -= 0.3;

Because the above is not part of a standard (nor works in Firefox,) write as follows:

document.getElementById("x").style.opacity -= 0.3;

In the case of adding to the opacity, parseFloat is necessary, because string concatenation will happen otherwise. Or write -= -0.3 🙂