How to start a function ONLY on a button click

I am looking to have my grid style game start once I click the start button on my page. Currently the game starts as soon as I click the grid, but I want this function to be invoked only when the you click the Start Button.

I already created my game Board. Which can be called using this function: createBoard(). Styling for this board is full of my divs and working.

I tried the solutions previously given in my other thread and still had an issue with the function not invoking only at the click of a start button.

Here is my replit: Any feedback on what I’m doing wrong? Thanks! :slight_smile:

You can give JS in the “onclick” attribute:

<button onclick="console.log('howdy');">Click Me</button>

You can also call one of your JS functions if it is scope:

<script type="text/javascript">
  function myFunc() {
    console.log('howdy');
  }
</script>

<button onclick="myFunc();">Click Me</button>

I’m not sure I understand the question can you not just call createBoard inside the start button handler?

BTW it should be style.css not styles.css and I would suggest you load the script after the DOM content, usually right before the closing body tag (or use the defer attribute on the script element).

You should probably also reset the game inside the start handler or create a reset button.

Oh, I didn’t see that he was doing event handlers in his JS. Yeah, that would be another way to do it.

I appreciate it! I would love to show you a screenrecording of what I am trying to invoke.

I appreciate this thanks so much. Currently when I click a grid/square it

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.