我试图从用户的给定维度创建一组块。代码在开头和提交表单中显示一个框但不是块,我不确定是什么&#39错了。
<html>
<head>
<title >MAHJONG GAME</title>
<div class="boxed" id="div1">
</div>
<form name= "dimensions" onSubmit="board()">
<p style="color:black">Type the number of cols you want</p>
<input type="number" name="col" />
<p style="color:black">Type the number of rows you want</p>
<input type="number" name="row" />
<p> </p>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
function board(){
for(var i=1;i<=document.dimensions.getElementsByName("col")[0].value;i=i+2){
for(var j=1;j<=document.dimensions.getElementsByName("row")[0].value;j=j+2){
var box = document.createElement("div");
box.class="boxed";
var a=document.createTextNode(Math.floor((Math.random()*10)+1));
box.appendChild(a);
var element=document.getElementById("div1");
element.appendChild(box);
}
}
</script>
<style type="text/css">
body {background-color:white;}
.boxed {
width: 10px;
padding: 10px;
margin:1px;
border:10px solid pink;
background-color: pink;
border-style:outset;
}
</style>
</head>
</html>
答案 0 :(得分:0)
部分问题是,当您点击提交按钮时,页面会重新加载并且不会处理您的脚本。我写得很快,所以代码可以清理一下。为了清楚起见,我创建了一个从输入中获取值并创建板的函数。然后我创建了一个功能来填充你的电路板:
function createBoard()
{
var InputColValue = document.getElementById('col').value;
var InputRowValue = document.getElementById('row').value;
board(InputColValue, InputRowValue);
};
function board(col, row) {
for (var i = 0; i < col; i++) {
newDiv = document.createElement("div");
divCol = "col"+i+" col-format";
newDiv.className = divCol ;
document.getElementsByTagName('body')[0].appendChild(newDiv);
for (var j = 0; j < row; j++) {
newDiv = document.createElement("div");
newDiv.className = "boxed";
document.getElementsByClassName(divCol)[0].appendChild(newDiv);
}
}
};
然后,对于CSS,您需要使用适当的格式来创建列和行:
.col-format {
float: left;
}
.boxed {
width: 10px;
padding: 10px;
margin:1px;
border:10px solid pink;
background-color: pink;
border-style:outset;
}
在HTML的正文中,使用输入类型按钮,而不是使用提交输入类型,使用onclick事件触发createBoard()函数:
<form>
<label>Type the number of col you want</label>
<input id="col" type="number" name="col" />
<br>
<label>Type the number of rows you want</label>
<input id="row" type="number" name="row" />
<br>
<input type="button" onclick="createBoard()" value="Submit">
</form>
应该这样做。