Se supone que el siguiente fragmento de código aumenta la opacidad de una determinada imagen (su id es 'img') en 0,01 por cada 10 milisegundos hasta que su opacidad se establezca en 1.
```var t; var frontimage=document.getElementById('img'); frontimage.style.top=200+'px'; frontimage.style.opacity=0; //line x frontimage.style.left=200+'px'; frontimage.style.width=500+'px'; frontimage.style.height=300+'px'; function right(){ if(frontimage.style.opacity>=0 && frontimage.style.opacity<1){ //condition frontimage.style.opacity=frontimage.style.opacity+0.01; //first statement console.log(frontimage.style.opacity); }else{ window.clearInterval(t); } } t= window.setInterval(right,10);```Creo que la primera declaración después de la condición if (vamos a llamarla como la primera declaración por ahora) se ejecuta solo una vez, mientras que la otra declaración en la misma condición se ejecuta perfectamente siempre que la condición siga siendo verdadera. Se supone que la primera instrucción aumenta la opacidad de la imagen en 0,01. La razón por la que digo que la primera declaración se ejecuta solo una vez es porque la segunda declaración de la misma condición, que se supone que muestra la opacidad de la imagen en la consola, siempre muestra 0.01 (la opacidad se había establecido en 0 antes). ¿Podría alguien explicarme por qué la primera declaración se ejecuta solo una vez cuando se supone que debe ejecutarse hasta que la condición se mantenga verdadera?
FYI, el siguiente fragmento de código se creó modificando la 'línea x', la 'condición if' y la 'primera declaración' del fragmento de código anterior y se supone que disminuye la opacidad de la misma imagen en 0,01 por cada 10 milisegundos. Este código se ejecuta perfectamente.
var frontimage=document.getElementById('img'); frontimage.style.top=200+'px'; frontimage.style.opacity=1; frontimage.style.left=200+'px'; frontimage.style.width=500+'px'; frontimage.style.height=300+'px'; function right(){ if(frontimage.style.opacity>0 && frontimage.style.opacity<=1){ frontimage.style.opacity=frontimage.style.opacity-0.01; console.log(frontimage.style.opacity); }else{ window.clearInterval(t); } } t= window.setInterval(right,10);La propiedad de opacity devolverá una cadena, por lo que debe convertirla en un número antes de agregarla porque el operador + en JavaScript puede significar una suma numérica (cuando ambos operandos son números) o una concatenación de cadenas (cuando uno o ambos operandos son cadenas) .
La razón por la que funciona con la resta es porque el - solo funciona con números, por lo que cualquier operando que no sea numérico se convertirá automáticamente en un número.
Además (FYI) en lugar de concatenar los tamaños de píxel con el px para producir una cadena, simplemente pase ambos, juntos, como una cadena:
En lugar de 200 + "px" , solo usa "200px" .
var t; var frontimage = document.getElementById('img'); frontimage.style.top = "200px"; frontimage.style.opacity = 0; frontimage.style.left = "200px"; frontimage.style.width = "500px"; frontimage.style.height = "300px"; console.log(typeof frontimage.style.opacity); // string function right(){ if(frontimage.style.opacity>=0 && frontimage.style.opacity<1){ frontimage.style.opacity = parseFloat(frontimage.style.opacity) + 0.01; //console.log(frontimage.style.opacity); }else{ clearInterval(t); } } t = setInterval(right,10); <img src="https://www.drawingforall.net/wp-content/uploads/2020/11/6-how-to-draw-a-smiley-face.jpg.webp" id="img">counter temporal y la comparé y la aumenté en 0.01 y la actualicé y al final asigné su valor a image.style.opacity .string con number . ya que no fue con la verificación de tipo, pero también debe tener eso en cuenta. let timeIntervalId = null; const image = document.querySelector("#img"); image.style.top = 200 + 'px'; image.style.left = 200 + 'px'; image.style.width = 500 + 'px'; image.style.height = 300 + 'px'; image.style.opacity = 0; var counter = 0; function right() { if (counter >= 0 && counter <= 1) { //condition counter = counter + 0.01; image.style.opacity = counter; //first statement console.log(image.style.opacity); } else { window.clearInterval(timeIntervalId); } } timeIntervalId = window.setInterval(right, 10); <img id="img" src="https://cdn.pixabay.com/photo/2022/06/23/09/46/mountain-7279430__480.jpg" />En el primer caso (la suma), la propiedad opacity y 0.01 frontimage.style.opacity+0.01 se concatenan en lugar de agregarse. Esto se debe a que la propiedad de opacidad se proporciona como una cadena. En el segundo caso (la resta), la propiedad de opacidad se convierte en un número antes de realizar la operación aritmética. Haz el siguiente typeof (frontimage.style.opacity) para que puedas ver que lo que realmente te proporciona es una cadena. Tienes dos opciones
parseFloat(frontimage.style.opacity) + 0.01+frontimage.style.opacity + 0.01