Mahjong Set of Blocks Javascript -


I am trying to create a set of blocks from a user's given dimensions. Displays a box in the code box and does not block the submission form, and I'm not sure what is wrong.

  & lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Mahjong Games & lt; / Title & gt; & Lt; Div class = "boxing" id = "div1" & gt; & Lt; / Div & gt; & Lt; Name of the form = "Dimension" Parameter = "Board ()" & gt; & Lt; P style = "color: black" & gt; Type the number of colors you want & lt; / P & gt; & Lt; Input type = "number" name = "col" /> & Lt; P style = "color: black" & gt; Type the number of rows you want & lt; / P & gt; & Lt; Input type = "number" name = "row" /> & Lt; P & gt; & Lt; / P & gt; & Lt; Input type = "submit" value = "submit" /> & Lt; / Form & gt; & Lt; Script type = "text / javascript" & gt; Function board () {for (var i = 1; i & lt; = document.dimensions.getElementsByName ("col") [0] .value; i = i + 2) {for (var j = 1; j & lt ; = Document Dimensions.getElementsByName ("line") [0] .value; j = j + 2) {var box = document.createElement ("div"); Box.class = "boxing"; Var a = document.createTextNode (Math.flur ((Math. Random) * 10) +1)); Box.appendChild (a); Var element = document.getElementById ("div1"); Element.appendChild (box); }} & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; Body {background-color: white;} Boxed {width: 10px; Padding: 10px; Margin: 1px; Limit: 10px solid pink; Background color: pink; Border style: start; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; / Html & gt;  

The part of the problem is that when you press the submit button, And does not process your script, I wrote it very fast so that the code can be cleared slightly. For clarity, I created a function that receives value from input and creates a board then I created a function to populate your board:

  Make the function (var InputColValue = Document.getElementById ('col'). Value; Var InputRowValue = document.getElementById ('line'); value; board (InputColValue, InputRowValue);}; function board (call, line) {for (var i = 0; I & lt; col; i ++) {newDiv = document.createElement ("div"); DivCol = "col" + i + "col-format"; NewDiv.className = divCol; document.getElementsByTagName ('body') [0] for .appendChild (newDiv); (var j = 0; j & lt; png ; J ++) {newDiv = document.createElement ("div"); NewDiv.className = "boxed"; document.getElementsByClassName (divCol) [0] .appendChild (newDiv);}}}  < / Pre> 

Then, for your CSS, you want to make your formatting suitable for columns and rows:

  .col-format {float: left;}. {Width: 10px; padding: 10px; margin: 1px; Limit: 10px solid pink; Background color: pink; Border style: start; }  

Instead of input input, instead of input input button, within the body of your HTML, with an onclick event that will fire the build () function:

  & lt; Form & gt; & Lt; Label & gt; Type the number of calls you want & lt; / Label & gt; & Lt; Input id = "col" type = "number" name = "col" /> & Lt; Br> & Lt; Label & gt; Type the number of rows you want & lt; / Label & gt; & Lt; Input id = "line" type = "number" name = "row" /> & Lt; Br> & Lt; Input type = "button" onclick = "createBoard ()" value = "submit" & gt; & Lt; / Form & gt;  

should do this


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -