1

我想在 JavaScript 中创建一个正方形。我用正方形在 CSS 中做了一个类。我想创建类似 a 的东西，<div class="square></div>以便在单击按钮时显示正方形。我尝试使用createElement并将语句传递为innerHTML. 然而，这似乎并没有奏效。有人可以帮我建议我缺少什么吗？我正在尝试使用用户输入的数字创建一个正方形矩阵

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- <meta charset="utf-8" /> -->
<title>Form Validation</title>
<script>
    function validateForm()
    {
        var x = document.forms["MyForm"]["Numval"].value;

        if ((!x.match(/^\d+/)) || ((x.length) > 1)) {
            alert("Please only one enter numeric character (Allowed input:1-9)");
        }
        else {
            for (i = 0; i < Number(x) ; i++) {
                for (j = 0; j < Number(x) ; j++) {
                    document.writeln(x);

                    var square = document.createElement('div');
                    square.className = 'squared';
                    document.body.appendChild(square)

                }
                document.writeln("</br>");
                }

        }

        return false;

    }
</script>



<style type="text/css">
.squared {
border: 2x solid black;
width: 50px;
height: 50px;
background:black;
color:black;
}
</style>

</head>
<body>
<form name="MyForm" onsubmit="return validateForm()" method="post" >


    Please enter a number between 1-9 : 
    <input type ="text" name="Numval"/>
   <input type="Submit" value="Submit" />


</body>
</html>
4

2 回答 2

1 
var square = document.createElement('div');
square.className = 'square';
document.body.appendChild(square);

这是小提琴：http: //jsfiddle.net/Ysw9n/

于 2013-01-10T03:42:24.170 回答
0

如果您使用 jquery，这确实是一件简单的事情：

$("#your-button-id").click(function() { 
   $("#your-square-parent-id").append('<div class="your-square-class">&nbsp;</div>');
});

但是你可以在没有 jquery 以及上面提到的 Joseph 的情况下做到这一点。无论如何，希望它有用。

于 2013-01-10T03:44:21.117 回答