Javascript 麻将牌组_Javascript - Fatal编程技术网

Javascript 麻将牌组

javascript

Javascript 麻将牌组,javascript,Javascript,我正在尝试从用户的给定维度创建一组块。代码在开始和提交表单中显示一个框，但不显示块，我不确定出了什么问题 <html> <head> <title >MAHJONG GAME</title> <div class="boxed" id="div1"> </div> <form name= "dimensions" onSubmit="board()"> <p style="color:black">

我正在尝试从用户的给定维度创建一组块。代码在开始和提交表单中显示一个框，但不显示块，我不确定出了什么问题

<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>


麻将游戏
键入所需颜色的数量
键入所需的行数

功能板（）{
对于（var i=1；i问题的一部分是，当您点击提交按钮时，页面会重新加载，并且不会处理您的脚本。我写这篇文章的速度非常快，因此代码可以稍微清理一下。为了清晰起见，我创建了一个函数，该函数从输入中获取值并创建板。然后我创建了一个函数来填充您的板：
    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);
        }
    }   
};

在HTML正文中，使用input type按钮，而不是使用submit输入类型，并使用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>


键入所需的列数


键入所需的行数



应该可以了。非常感谢，但是如果我想在块上生成随机数，我该如何实现呢？我使用了这个，但我认为它不起作用var a=document.createTextNode（Math.floor（（Math.random（）*10）+1））；我正在尝试了解您要编写的脚本类型。是否希望用户选择行/列的数量，并允许他们生成1-10之间的随机块数？用户只选择行/列的数量。然后计算机创建带有随机字母或数字的块。必须创建每个字母或数字至少两次，这样当你点击其中两个字母或数字相同时，它们就会消失（就像在麻将游戏中一样）。
<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>