1

JavaScriptで正方形を作りたいです。CSSで正方形のクラスを作成しました。<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 がなくてもそれを行うことができます。とにかく、それが役に立つことを願っています。

于 2013-01-10T03:44:21.117 に答える