javascript creating div boxes

Hello Experts,
I am trying to create a script that shows an area model example for basic multiplication problems. For example, 6 x 7 = 42. The script creates a div that is 60px long and 70px high. The script below does just that, but a single large div is not very helpful in showing an area model. It would be much better if the area of the div was labeled and broken up into units or a grid so that the units could actually be counted.

What I would like to do is somehow change the one big div into many tiles, or single squares. Back to the example 6 x 7, is there a way that it would automatically show a grid of 42 squares 6 wide by 7 tall? I'm not sure how this could be done. Can the divs be created and placed by javascript? Could the div be gridded somehow, or would a number of smaller divs need to be placed next to one another?

Thank you for any help you can provide. I hope that my question makes sense.
rhyno99
<body>
<script type="text/javascript">
            function calculate (){
                var f1 = document.getElementById('factor1').value;
                var f2 = document.getElementById('factor2').value;
                document.getElementById('product').value = f1*f2;
                var areaModel = document.getElementById("area_model");
                try {
                areaModel.style.height = (f1 * 10)+ "px";
                areaModel.style.width = (f2 * 10)+ "px";
                } catch (err) {
                    var txt = "Error: " + err.description;
                    alert(txt);
                }
            }
        </script>

<form>
 <div id="main">
<div id="area_model" style="background-color:#0F0; border:thick; border-color:#000; border-style:solid; float:right";>
</div>
<div id="problem" style="float:left";>
	<div id="line_one">
    	<div id="first_factor"><input type="text" name="p1" id="factor1" class="problemNum1" maxlength="4" />
    	</div>
	</div>
    
    <div id="line_two">
		<div id="second_factor"><input type="text" name="p1" id="factor2" class="problemNum1" maxlength="4"/>
		</div>
    	<div id="operation"><input type="text" name="operation" id="operation" class="problemNum1" maxlength="1" value="x" />
    	</div>
    </div>
    
    <div id="inputAnswer" >
		<div id="answer">
        <input type="text" name="p1" id="product" class="product"/>
		</div>
		<div id="second_product" style="display:none">
        <input type="text" name="p1" id="product2" class="problemNum1" readonly="readonly"/>
		</div>
		<div id="final_product" style="display:none">
        <input type="text" name="p1" id="num1" class="problemNum1" readonly="readonly"/>
		</div>
    </div>
</div>

<div id="solve"><input type="button" onclick="calculate();" value="Show and Solve"/>
</div>
</div> 
</form>

</body>

Open in new window

rhyno99Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ProculopsisCommented:

Is this any good:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27487340.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function() {

  $("#solve").click( function() {
    var width = Number( $("#x").val() );
    var height = Number( $("#y").val() )
    $("#show").css( { width: width * 10, height: height * 10, border: "1px solid red" } );
    $("#product").val( width * height );
    for ( var x = 0; x < width; x++ ) {
      for ( var y = 0; y < height; y++ ) {
        $("#show").append( $("<div/>").css( { width: 8, height: 8, float: "left", border: "1px solid red" } ) );
      }
    }
  });

});
</script>

<body>

<input type="text" id="x" value="22" /> X
<input type="text" id="y" value="7" /> =
<input type="text" id="product" readonly="readonly" />
<input type="button" id="solve" value="Show and Solve" />

<div id="show"></div>

</body>
</html>

Open in new window

0
ProculopsisCommented:

Correction - you need a .empty()

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27487340.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function() {

  $("#solve").click( function() {
    var width = Number( $("#x").val() );
    var height = Number( $("#y").val() );
    $("#show").empty();
    $("#show").css( { width: width * 10, height: height * 10, border: "1px solid red" } );
    $("#product").val( width * height );
    for ( var x = 0; x < width; x++ ) {
      for ( var y = 0; y < height; y++ ) {
        $("#show").append( $("<div/>").css( { width: 8, height: 8, float: "left", border: "1px solid red" } ) );
      }
    }
  });

});
</script>

<body>

<input type="text" id="x" value="22" /> X
<input type="text" id="y" value="7" /> =
<input type="text" id="product" readonly="readonly" />
<input type="button" id="solve" value="Show and Solve" />

<div id="show"></div>

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rhyno99Author Commented:
Thanks Proculopsis,
I'm sure it is good, but I am not familiar much at all with JQuery. I copy/pasted your code, but I don't even know how to preview it in a browser. Is there a way to do this with just javascript? It would help if I needed to make any adjustments.
Thanks again for your help,
rhyno99
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

rhyno99Author Commented:
Researching and trying to understand what to do-  It looks like the methods cloneNode () or createElement() might work. Not sure which is better for this or how quite to use them. I'll keep looking.
0
rhyno99Author Commented:
Hi Proculopsis,
Wow, sorry about my mistake. When trying to preview in DreamWeaver, the option wasn't available. Not knowing anything about JQuery made me think that was it. Now I noticed that I saved the file with a . in the name and that was causing the problem. The script has what I am looking for. I'll see if I can understand it so I can work with it. Again, thanks for your help.
rhyno99
 
0
rhyno99Author Commented:
BTW- Correct me if I am wrong, but I am noticing that it is not working when placed in a WordPress page. Do JQuery and WordPress have a conflict?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.