I want to create a square in JavaScript. I have made a class in CSS with square. I want to create something like a <div class="square></div> so that the square is displayed when I click on the button. I have tried using createElement and passing the statement as innerHTML. However that didn't seem to work. Can someone help me in suggesting what I am missing? I am trying to create a matrix of squares using the number input by the user
<!DOCTYPE html>
<html lang="en" xmlns="">
<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>
I want to create a square in JavaScript. I have made a class in CSS with square. I want to create something like a <div class="square></div> so that the square is displayed when I click on the button. I have tried using createElement and passing the statement as innerHTML. However that didn't seem to work. Can someone help me in suggesting what I am missing? I am trying to create a matrix of squares using the number input by the user
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/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>
- 3 We can't help figure out what's wrong if you don't post your code. – Jason Commented Jan 10, 2013 at 3:41
- Could you show us the code? – Anthony Forloney Commented Jan 10, 2013 at 3:41
- Very vague, but many options. Probably easiest is to create a css class called "square". Then create an element and give it the class square. – Raekye Commented Jan 10, 2013 at 3:42
2 Answers
Reset to default 1var square = document.createElement('div');
square.className = 'square';
document.body.appendChild(square);
Here's the fiddle: http://jsfiddle/Ysw9n/
If you use jquery it's really a simple thing to do:
$("#your-button-id").click(function() {
$("#your-square-parent-id").append('<div class="your-square-class"> </div>');
});
But you can do that without jquery as well as Joseph stated above. Anyways, hope it is useful.