HTML on-click button to run javascript function

Question

I would like to create an on click button to run a javascript function to generate a grid in the style of a crossword.

I have written some javascript to create the grid and I have made the button with the onclick function, but I am unable to get the button to run the script.

I'm sure the solution is glaringly obvious but I'm new to coding so any and all help would be appreciated!

<html>

  <body>

    <!--<button onclick="generateGrid()">Click to generate crossword grid</button>-->

    <div id="crosswordGrid" align="center"></div>

  </body>

</html>

function generateGrid () {

var crosswordGrid = document.getElementById("crosswordGrid");

for (var r = 0; r < rows; r++) {
  var row = crosswordGrid.appendChild(document.createElement("div"));
  for (var c = 0; c < cols; c++) {
    row.appendChild(document.createElement("span"));
  }
}

const gridSize = 7;

var rows = gridSize;
var cols = gridSize;

}

This is what my current code looks like; http://jsfiddle.net/YEJ9A/97/

Why is the button html commented out?

H77
– H77

2018-02-01 02:00:03 +00:00
Commented Feb 1, 2018 at 2:00 — H77
– H77, Commented Feb 1, 2018 at 2:00

Cogwizzle · Accepted Answer · 2018-02-01 02:17:14Z

1

So I think you were mostly the way there. I moved the values you were assigning at the bottom of the file into the default value of the function. See the corrections below.

Also updated on fiddle. https://jsfiddle.net/r8aLbakr/1/

function generateGrid (gridSize = 7, rows = 7, cols = 7, crosswordGrid) {

  var crosswordGrid = document.getElementById("crosswordGrid");

  for (var r = 0; r < rows; r++) {
    var row = crosswordGrid.appendChild(document.createElement("div"));
    for (var c = 0; c < cols; c++) {
      row.appendChild(document.createElement("span"));
    }
  }
}

#crosswordGrid div {
  line-height: 1px;
}

#crosswordGrid span {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 1px solid black;
}

#crosswordGrid div:nth-child(even) span:nth-child(even) {
  background-color: black;
}

#crosswordGrid div:nth-child(odd) span:nth-child(odd) {
  background-color: white;
}

<html>

  <body>

    <button onclick="generateGrid()">Click to generate crossword grid</button>
    
    <div id="crosswordGrid" align="center"></div>

  </body>

</html>

answered Feb 1, 2018 at 2:17

Cogwizzle

5504 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephen Over a year ago

Thank you so much! So just to clarify, for future reference... I was attempting to create a function and I was assigning values to variables, but I wasn't correctly assigning these variables to the function. So in the future, I should write the code in the format: myFunction Function (x,y,z variables) {...

Cogwizzle Over a year ago

That is the easiest way to handle it. Passing in the variables helps your function be a lot more predictable. Above where you see me doing gridSize = 7 I am setting the default value of the function.

Cogwizzle Over a year ago

Could you mark mine as the answer and vote up. I noticed you are new to Stack Overflow so I figured I would give a friendly reminder.

MonarchFish · Accepted Answer · 2018-02-02 08:29:49Z

1

Try to use "addEventListener" instead of "onclick"

here is my answer

Code:

    document.getElementById ("btn").addEventListener("click", function() {
      generateGrid(7);
    } , false);

    function generateGrid(gridSize) {
      var rows = gridSize;
      var cols = gridSize;
      var crosswordGrid = document.getElementById("crosswordGrid");

      for (var r = 0; r < rows; r++) {
        var row = crosswordGrid.appendChild(document.createElement("div"));
        for (var c = 0; c < cols; c++) {
          row.appendChild(document.createElement("span"));
        }
      }
    }

#crosswordGrid div {
  line-height: 1px;
}

#crosswordGrid span {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 1px solid black;
}

#crosswordGrid div:nth-child(even) span:nth-child(even) {
  background-color: black;
}

#crosswordGrid div:nth-child(odd) span:nth-child(odd) {
  background-color: white;
}

<html>
  <body>
    <button id="btn">Click to generate crossword grid</button>
    <div id="crosswordGrid" align="center"></div>
  </body>
</html>

edited Feb 2, 2018 at 8:29

answered Feb 1, 2018 at 2:30

MonarchFish

113 bronze badges

1 Comment

Cogwizzle Over a year ago

Your answer is great too. To increase your chances of success with this response you should make these snippets executable. There should be a button when editing your post to allow you to do this.

Collectives™ on Stack Overflow

HTML on-click button to run javascript function

2 Answers 2

3 Comments

Code:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Code:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related