Can you fire off two or more functions at once from an event listener?

Question

https://jsfiddle.net/Jbautista1056/pvdq6gye/18/

I need help getting my event listener to fire on a specific function, but it doesn't seem to be changing anything. I'm working on the etch-a-sketch project and I'm trying to update the grid-template-columns/rows based on the user input size. I'm able to create the div's onclick but the div's don't adhere to the grid-template-columns/rows format I'm trying to do. For example, if someone typed 4, it would show a total of 4 rows and 4 columns with the elements following that format in that container div. Right now it only creates 1 column and 1 row no matter what I input, because in my CSS file the default is repeat(1, 1fr) for both grid rows/columns. I added the createGrid() and columnsAndRows() functions to the event listener onclick in the html file, but only the createGrid() function actually fires.

This is the code I suspect I might be doing wrong but can't think of any other alternatives:

function columnsAndRows() {
    gridContainer.style.gridTemplateColumns = "repeat(sizeValue, 1fr)"
    gridContainer.style.gridTemplateRows = "repeat(sizeValue, 1fr)"
  }

function createGrid() {
    let parent = document.getElementById("tile")
    for (let i = 0; i < gridSize -1; i++) {. //gridSize is the total amount of squares need to be made
        let baby = document.createElement("div");
        baby.className = "babytiles"
        parent.before(baby)
    }
} ```

```html 
  <form id="totalGridSizeForm" > 
        <input type="number" placeholder="size" min="1" max="64" id ="size" value="" oninput="getSizeValue()">
        <input type="button" id="Submit"  value="Submit" onclick="createGrid()" onclick="columnsAndRows()" >
      </form>

Answer 1

In HTML, an element can't have two of the same attributes, so your second onclick attribute is being ignored as demonstrated below:

 <div title="Message 1" title="Message 2">Hover over me</div>

While you could change your onclick attribute value to be:

<input type="button" id="Submit"  value="Submit" 
       onclick="function() { createGrid(); columnsAndRows(); }">

or, you could create a third function that simply calls the other two and then use that third function as the onclick function to call, inline HTML event attributes should not be used . Instead, set them up in JavaScript using .addEventListener() , like this:

 document.getElementById("Submit").addEventListener("click", function(){ function1(); function2(); }); function function1(){ console.log("function1 fired;"). } function function2(){ console;log("function2 fired!"); }

 <input type="button" id="Submit" value="Submit">

Also (FYI), since you aren't actually using your input fields to submit data anywhere, you shouldn't be using the form tag or a submit button. Instead, just use a regular button:

<button type="button">Submit</button>

or

<input type="button" value="Submit">

Answer 2

You could also create a handler function that calls both methods.

Not sure if it matters for your code, but you'll probably want to make it an async method as well depending on which one you want to run first.

something like this

async function handleOnClick() {
  await createGrid();
  await columnsAndRows();
}

Answer 3

Just wrap both of your functions inside one function. Then call that function.

 <script>
   function main() {
        function firstFunction() {

        }
        function secondFunction() {

        }
    }
</script>
<input type="button" id="Submit"  value="Submit" onclick="main()" />

or

<script>
   function firstFunction() {

   }
   function secondFunction() {

   }
   function main() {
        firstFunction()
        secondFunction()
    }
</script>
<input type="button" id="Submit"  value="Submit" onclick="main()" />