Necesito ayuda con mi código. La tarea es mostrar una imagen usando un botón. Pero la imagen tiene que mostrarse gradualmente con la propiedad "opacidad" de CSS.
La imagen debe comenzar en la opacidad 0 y debe terminar en la opacidad 1.
Nuestro maestro sugiere que usemos "parsefloat" para que JS pueda reconocer las cadenas de CSS como números.
Realmente no sé por qué mi código no funciona. Te agradecería mucho si pudieras mostrarme dónde está mi error.
Aquí está mi código:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Aufgabe 12.2</title> <script> var go = function() { var opac = function(delay) { var img = document.createElement("img"); img.src = "http://www.google.com/intl/en_com/images/logo_plain.png"; var level = 0; var step = function(){ img.style.opacity = level; if(level <= 1) { level += .1; setTimeout(step, delay); } } step(); } opac(100); }; </script> <body> <input type = "button" onclick = "go();" value = "Click me"/> </body> </head> </html>Aquí hay un ejemplo de trabajo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Aufgabe 12.2</title> <script> var go = function () { var opac = function (delay) { var img = document.createElement('img'); img.src = 'http://www.google.com/intl/en_com/images/logo_plain.png'; document.body.appendChild(img); var level = 0; var step = function () { img.style.opacity = level; if (level <= 1) { level += 0.1; setTimeout(step, delay); } }; step(); }; opac(100); }; </script> <body> <input type="button" onclick="go();" value="Click me" /> </body> </head> </html>Aquí hay un enlace con más información.
Debe agregar el nodo img al DOM:
const btn = document.querySelector("input") btn.onclick = () => go(100) var go = function(delay) { var img = document.createElement("img"); img.src = "http://www.google.com/intl/en_com/images/logo_plain.png"; document.body.append(img) var level = 0; const step = function() { img.style.opacity = level; if (level <= 1) { level += .1; setTimeout(step, delay); } } step(); } <input type="button" value="Click me" />