Html Question posted in
Some basic documentation can be found here.

Html – "Uncaught type error: pixel() is not a function"

I’m creating a really simple webpage that makes you draw a 50×50 pixel two-colors image you can export (I didn’t implemented the function to do that yet) that I will use for a next project I called "nork". Here’s the full HTML and JS code:

<html>
    <head>
        <title>nork Image Format Converter</title>
        <script>
            var width, height;
            var tableDiv;
            var table;
            
            let i, j;
            
            function pixel(id, color)
            {
                pixel = document.getElementById(id);
                
                if (color==0)
                {
                    pixel.src = "pixelBlack.png";
                } if (color==1) {
                    pixel.src = "pixelWhite.png";
                } else {
                    window.alert("Error in color argument passed to pixel() function. Not recognized color code. Avaiable colors are: 0(black), 1(white).")
                }
            }
            
            function createImageTable()
            {   
                width = 50;
                height = 50;
                
                tableDiv = document.getElementById("image");
                
                table = "";
                for (i = 0; i<height; i++)
                {
                    for (j = 0; j<width; j++)
                    {
                        table += "<img src="pixelBlack.png" id="" + i.toString() + j.toString() + "" onClick = "pixel('" + i.toString() + j.toString() + "', 1);" onDblClick = "pixel('" + i.toString() + j.toString() + "', 0);">";
                        console.log(i.toString(), j.toString(), i, j);
                    }
                    table += "<br>"
                }
                
                tableDiv.innerHTML = table;
            }
        </script>
    <head>
    <body>
        <button onClick="createImageTable()">Create image table</button>
        </div>
        <br>
        <div id="draw-image">
            <h3>Draw image</h3>
            <p>To draw single-click a pixel to colour it white, to colour it black - so to erease it - double-click the pixel.</p>
            
            <div id="image"></div>
        </div>
    <body>
</html>

There is a button at the top to create the 50×50 table (and this works. Function createImageTable()). Next the user created the table it can be used to draw anything a person wants: clicking a single time the pixel becomes white, clicking two times (double-click) the pixel becomes black. This is the pixel() function’s work. In theory, ’cause it works only for the first pixel I click, but after I click the first time, the other times, any pixel I hit, it says:

Uncaught TypeError: pixel is not a function
    at HTMLImageElement.onclick (main.html:1:1)

What’s the problem here?
Thank you very much!

Tags:

2

Answers


  1. 0

    In your pixel funtion you named a variable pixel which is same as the funtion name which is causing the issue, Change the name and it should solve your issue

    Login or Signup to reply.
  2. 0

    You are using the pixel name for your function, and for storing a DOM object. It could work even if it’s not a good practice.

    But your issue is somewhere else. When you’re writing

    function pixel(id, color)
{
    pixel = document.getElementById(id);
}

    You are defining pixel as a function, but as soon as the function is ran, pixel is a DOM object, and not a function anymore. That’s why your function is working only the first time.

    You should redefine pixel inside your function with let declaration.

    let pixel = document.getElementById(id);

    For better code reading, use another variable name inside your function.

    Another mistake in your code is the if statement. When you’re writing

    if( Condition_A ){}
if ( Condition_B ) {}
else {}

    Youre code is testing the first statement, and go through the others statements even if condition_A is true. As I understand your code, you wanted to write

    if( cond_A ) {}
else if ( cond_B ) {}
else {}

    As so, if A is true, it will run A and stop. If not, go to test cond_B and if not true neither, go inside the else code.

    You could fin everything explained here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search