javascript creating div boxes

rhyno99
rhyno99 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

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


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

Author

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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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.

Author

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
 

Author

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?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial