I am trying to change the opacity of an element after every 100 milliseconds after a click event. But it is not working. The function change is called after a click event. Here is my code:
function change (i) {
var o:number = 0;
setTimeout( function() {
o = o + 0.1;
document.querySelector("div.label").style.opacity = o;
console.log("o = " + o);
}, 100)
}
When I console log, the value of o is always 0.1. What is wrong with this code?
You need to update the var o with the current opacity before increasing it:
function change (i) {
var o:number = 0;
setTimeout( function() {
o = document.querySelector("div.label").style.opacity; // <-- ADD THIS
o = o + 0.1;
document.querySelector("div.label").style.opacity = o;
console.log("o = " + o);
}, 100)
}
You're using setTimeout(), but I think you're looking for setInterval() method (if you want something to repeat itself).
Try :
function change (i) {
var o:number = 0;
setInterval( function() {
o = o + 0.1;
document.querySelector("div.label").style.opacity = o;
console.log("o = " + o);
}, 100)
}
BE CAREFUL : you have to prevent your variable o to go beyond 1 (maximum opacity). You can use clearInterval().