JS: Function works manually in console but not executed automatically in code

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>

@Rojo "I also tried to just put all the code from the makeGray() function in the upload() function but also here it won't trigger" — Andreas
– Andreas, Commented Mar 26, 2021 at 12:41
It doesn't work! @Rojo It won't make it gray. Only after I manually type it in the console.. — Maria
– Maria, Commented Mar 26, 2021 at 12:42

Rojo · Accepted Answer · 2021-03-26 12:50:00Z

2

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>

answered Mar 26, 2021 at 12:50

Rojo

2,8791 gold badge20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Thille Over a year ago

I was writing pretty much the same answer, but I see there's no point posting it, so have an upvote instead. There's definitely something asynchronous going on. I tried await but it did nothing. A 100ms timeout was also exactly my "solution" (more like a hack, really, but as long as it works).

Collectives™ on Stack Overflow

JS: Function works manually in console but not executed automatically in code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related