showing divs (area model)

Hello Experts,
I am trying to make a javascript program for my students that allows them to manipulate and show an area model for a multiplication problem. For example 6 x 7 would show a model that is 6 units long and 7 units high.
I was trying to show this with a div that would change size off to the right. (yes the css is wrong and should be moved. everything is in beginning stages) Using javascript, I couldn't get the div to change size. Eventually it would also be best if there was a way to label the div's height and width and show tiles of single units if it is possible. For example 6 x 7 would show 42 tiles off to the right 6 tiles long and 7 tiles high with labels on each side. Is there a better way to do this than my approach??
Thank you for any help or advice that you can provide,
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;
  document.getElementById("area_model").height = f1;
  document.getElementById("area_model").width = f2;
} 
</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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

baretreeCommented:
It is basically that you'd better specify "px" or "%" to your sizes as well as some typo's you had there like some extra ";"
here is the code, and for me it is working... of course you need to specify "big" values for width for you to notice the area



<html>
    <head>
        <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 + "px";
                areaModel.style.width = f2 + "px";
                } catch (err) {
                    var txt = "Error: " + err.description;
                    alert(txt);
                }
            }
        </script>
    </head>
    <body>
        <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>
                <div id="line_two">
                    <div id="second_factor">
                        <input type="text" name="p1" id="factor2" class="problemNum1" maxlength="4"/>
                    </div>
                </div>
                <div id="operation_div">
                    <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 id="solve">
                <input type="button" onclick="calculate();" value="Show and Solve"/>
            </div>
        </form>
    </body>
</html>

Open in new window

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:
BareTree,
Thanks for your help.

areaModel.style.height = f1 + "px";
                areaModel.style.width = f2 + "px";
                } catch (err) {
                    var txt = "Error: " + err.description;
                    alert(txt);
                }

that's funny. I thought I tried that = f1 + "px" . I guess I must have done something a wrong. Looking at the code, I couldn't get the alert to show up. What is it for and what does it do? I thought it showed if a word was inserted instead of a number.

I went with
areaModel.style.height = (f1 * 10)+ "px";
                areaModel.style.width = (f2 * 10)+ "px";

Do you think there is a way to show as individual tiles or add a label?
baretreeCommented:
i put an alert because i was testing and wanted to be sure there were no errors
what it does is to show a message if for example i had an error invoking the methods

like

areaModel.style.width() = f1 + "px;"  // that's an error cause width doesn't support that "method"

actually you shouldn't be getting any alerts.... you can get rid of the try-catch

and what do you mean exactly by the last question?
rhyno99Author Commented:
Hi baretree,
Thanks for explaining.

The area models for students to show multiplication are based on 1cm x 1cm cubes that students move around and manipulate. Maybe you've seen them in school way back. The larger div is good, but I think it would be more effective if I was able to show the tiles, or cubes in the model. For example 6 x 7 = 42; it would be great to show seven long and six high and the students could actually count them if they wanted. I hope that this makes sense.

I was thinking of making divs that are square in width and height that could be created and placed by javascript when a problem is created, but I'm not sure quite how it would work or if there is a better way. Any thoughts? If nothing comes to mind I will start a new question, but I would appreciate any input on this.
Thanks,
rhyno99
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.