Question

我试图从用户的给定维度创建一组块。代码在开头和提交表单中显示一个框但不是块，我不确定是什么＆＃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>

Answer 1

部分问题是，当您点击提交按钮时，页面会重新加载并且不会处理您的脚本。我写得很快，所以代码可以清理一下。为了清楚起见，我创建了一个从输入中获取值并创建板的函数。然后我创建了一个功能来填充你的电路板：

    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>

应该这样做。

麻将套块Javascript

1 个答案: