Gradually show an image using Javascript with the CSS property opacity-CodePudding

I need some help with my code. The task is to show an image by using a button. But the image has to show gradually with the CSS property "opacity".

The image should start at opacity 0 and should end at opacity 1.

Our teacher suggests us using "parsefloat" so the strings from CSS could be recognized by JS as numbers.

I do not really know why my code is not working. I would really appreciate it if you could show me where my mistake is.

Here is my code:

<!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>

CodePudding user response：

You need to append the img node to the 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" />

CodePudding user response：

your code almost works, the only problem is that after you create your img variable, you never append it to the document. You create the image and correctly make it fade in but it is not part of the document so it will not be rendered. To fix this, addIn this line, document grabs a reference to the whole HTML document, and .body references the body tag. The .appendChild tells it to add a child element, to the body.

Here is a working example:

<!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>

Here is a link with more information