I'm going through a Coursera html course and I am supposed to convert an image to grayscale in one of our projects. Can somebody help explain why this doesn't work. There are ways to fix it but I want to know why when changeToGrayscale() is called and if statement is true, the for loop is not running? or if it does the image is not loaded to the canvas? Thanks in advance.

var originalImg = null;
var grayscaleImg = null;
var input;
var canvas;

function selectImage() {
    canvas = document.getElementById("canvas");
    input = document.getElementById("input");
    originalImg = new SimpleImage(input);
    originalImg.drawTo(canvas);

}

function changeToGrayscale() {

     if (imageEmpty(grayscaleImg)) {
        grayscaleImg = new SimpleImage(input);
        for (var pixel of grayscaleImg.values()) {
            var average = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3;
            setRGB(average, average, average, pixel);
            grayscaleImg.setPixel(pixel.getX(), pixel.getY(), pixel);
        }

        grayscaleImg.drawTo(canvas);
    }
}

function imageEmpty(image) {
    return(image === null);
}

function setRGB(r, g, b, pixel) {
    pixel.setRed(r);
    pixel.setGreen(g);
    pixel.setBlue(b);
}