0

I am trying to make a pixel art maken for an assignment for school, but i am not able to get the button event to work. I am adding an evenListener and bind a function to it but the function is never fired off. I am trying to show a simple text in the log.

Can someone tell me what i am doing wrong here?

Thanks in advance.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker" onsubmit="return false">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" 
    value="1">
        Grid Width:
        <input type="number" id="inputWeight" name="width" min="1" 
    value="1">
        <input type="submit" id="submitButton" value="Draw">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

JavaScript:

// When size is submitted by the user, call makeGrid()
const btnSubmit = document.getElementById("submitButton");

btnSubmit.addEventListener("click", makeGrid());

function makeGrid() {
    // Your code goes here!
    console.log("test");
}
ivan franken
  • 21
  • 1
  • 7

2 Answers2

1

You're calling the function makeGrid:

btnSubmit.addEventListener("click", makeGrid());
                                            ^

Try this:

// When size is submitted by the user, call makeGrid()
const btnSubmit = document.getElementById("submitButton");

btnSubmit.addEventListener("click", makeGrid); // <- Change here!

function makeGrid() {
    // Your code goes here!
    console.log("test");
}
Ele
  • 33,468
  • 7
  • 37
  • 75
0

In the Listener, the callback is without an argument function

btnSubmit.addEventListener("click", makeGrid);

Kenry Sanchez
  • 1,703
  • 2
  • 18
  • 24