Here is the issue you are facing
Issue 1:
When defining your CSS as shown below:
#movies {
opacity: 0.0;
}
the
document.getElementById().style.opacity
will be empty because it takes from inline style, like:
<div id="movies" style="opacity: 0.0">
Issue 2:
In the line
movies.style.opacity = movies.style.opacity + 0.1;
, since
movies.style.opacity returns a string, you end up appending strings resulting in values like 0.10.1 and so on. The solution is to use parseFloat! Check out the attached code snippet for the fix.
Code:
var moviesOp = document.getElementById('movies').style.opacity;
function adjustOpacity(){
console.log('interval called with op = ' + moviesOp);
if(moviesOp < 1.0){
moviesOp = parseFloat(moviesOp) + 0.1;
} else {
clearInterval(timer);
}
}
var timer = setInterval(adjustOpacity, 1000);
<div id="movies" style="opacity: 0.0">
View JSBin With Inline Style Solution
If you prefer not using inline CSS and want to getComputedStyle, check out this alternative approach that achieves the desired result:
var movies = document.getElementById('movies');
function adjustOpacity(){
var moviesOp = window.getComputedStyle(movies).getPropertyValue('opacity');
console.log('interval called with op = ' + moviesOp);
if(moviesOp < 1.0){
movies.style.opacity = parseFloat(moviesOp) + 0.1;
} else {
clearInterval(timer);
}
}
var timer = setInterval(adjustOpacity, 1000);
View Non Inline jsBin Solution