JS：Function 在控制台中手动工作，但在代码中不自动执行

Question

I copied this code snippet from here: https://codepen.io/duketeam/pen/ALEByA

This code is supposed to load a picture and make it grayscale after clicking on the button. I want to change the code such that the picture comes out immediately as grayscale without having to click on the button, hence why I commented it out and included makeGray() in the onload part of the <input...> . But this doesnt work. Where am I going wrong here?

I have tried to leave out the makeGray() and just upload the picture and type makeGray() in the console and it does its job perfectly fine, but I need it to execute automatically. I also tried to just put all the code from the makeGray() function in the upload() function but also here it won't trigger.

 var image = null; function upload() { //Get input from file input var fileinput = document.getElementById("finput"); //Make new SimpleImage from file input image = new SimpleImage(fileinput); //Get canvas var canvas = document.getElementById("can"); //Draw image on canvas image.drawTo(canvas); } function makeGray() { //change all pixels of image to gray for (var pixel of image.values()) { var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3; pixel.setRed(avg); pixel.setGreen(avg); pixel.setBlue(avg); } //display new image var canvas = document.getElementById("can"); image.drawTo(canvas); }

 <script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"> </script> <h1>Convert Image to Grayscale</h1> <canvas id="can"></canvas> <p> <input type="file" multiple="false" accept="image/*" id="finput" onchange="upload();makeGray()"> </p> <p> <.---- <input type="button" value="Make Grayscale" onclick="makeGray()" --> </p> <script src="./index.js"></script>

Answer 1

There's something you need to wait for, but I'm not sure exactly what it is. If you wrap the function in a setTimeout , it works fine. You might want to wait for a few more milliseconds for clients with slower systems or bigger files. If you ever figure out what is taking a while to do, you can instead use .then or await just to be safe.

 var image = null; function upload() { //Get input from file input var fileinput = document.getElementById("finput"); //Make new SimpleImage from file input image = new SimpleImage(fileinput); //Get canvas var canvas = document.getElementById("can"); setTimeout(() => { //change all pixels of image to gray for (var pixel of image.values()) { var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3; pixel.setRed(avg); pixel.setGreen(avg); pixel.setBlue(avg); } image.drawTo(canvas); }, 100); }

 <script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"> </script> <h1>Convert Image to Grayscale</h1> <canvas id="can"></canvas> <p> <input type="file" multiple="false" accept="image/*" id="finput" onchange="upload();"> </p> <script src="./index.js"></script>