我想创建一个点击按钮来运行 JavaScript 函数来生成填字游戏样式的网格。
我编写了一些 javascript 来创建网格，并且使用 onclick 函数制作了按钮，但我无法让按钮运行脚本。
我确信解决方案非常明显，但我是编码新手，因此我们将不胜感激!
<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;
}
这就是我当前的代码的样子； http://jsfiddle.net/YEJ9A/97/
最佳答案
所以我认为你基本上就是这样。我将您在文件底部分配的值移至函数的默认值中。请参阅下面的更正。
还更新了 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>关于javascript - HTML 单击按钮来运行 javascript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48554219/