CodingForums.com - Help Creating Unit Converter

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Help Creating Unit Converter (http://www.codingforums.com/showthread.php?t=210088)

Help Creating Unit Converter

Hi all --

I realize this is probably pretty simple, but it's been a while since I did any Javascripting, and things have changed a great deal. My apologies if I sound a bit clueless.

I need to create a conversion tool. On one side of the tool are 4 form boxes. On the other, just text (not in form boxes). Under the covers, I have formulas for converting the numbers -- mostly basic math functions. So, the user types in numbers, clicks convert and the text changes.

For some reason, I'm having a hard time getting this to go. How can I get the results of these calculations to show up as text within a DIV tag and not inside a form element? There are lots of examples of getting these calculations to appear within form boxes, but not within DIVs. Any examples would be greatly appreciated.

This page is already using the Dojo toolkit for some other functionality, is this something I could leverage here to build my Javascript?

Thanks in advance for your patience.

I don't know squat about dojo, but all you need to do to populate a div (or a lot of other elements) is use the .innerHTML assignment. So, in the most general of terms use...

Code:

myDiv.innerHTML=conversion_result;

Instead of

Code:

myInput.value=conversion_result;

You can write to element.innerHTML or add or replace a text node-

element.innerHTML=txt;

parentof_original_node.replace(document.createTextNode(txt), original_node)

So, I've got form boxes named a, b, c, d.
I've got DIV tags named x1, x2, x3, x4, x5, x6, x7.

Here's my code... any idea why the script isn't inserting the text into my DIV tags?

Code:

function convert(form) {



        var a=eval(form.a.value);

        var b=eval(form.b.value);

        var c=eval(form.c.value);

        var d=eval(form.d.value);

        

        var x1=a*62.428

        var x2=a*.03613;

        var x3=a*8.3454;

        var x4=b*1728;

        var x5=b*27.68;

        var x6=c*22.4140;

        var x7=d*359.05;

        

        document.getElementById('x1').innerHTML=x1;

        document.getElementById('x2').innerHTML=x2;

        document.getElementById('x3').innerHTML=x3;

        document.getElementById('x4').innerHTML=x4;

        document.getElementById('x5').innerHTML=x5;

        document.getElementById('x6').innerHTML=x6;

        document.getElementById('x7').innerHTML=x7;        



}

I don't see anything wrong in the code you posted apart from eval(), so the problem seems to lie elsewhere. This test-rig works for me but of course I have no idea what values ought to be entered in the four textboxes.

Code:

<form name= "myform">



<input type = "text" name = "a" id = "a">

<input type = "text" name = "b" id = "b">

<input type = "text" name = "c" id = "c">

<input type = "text" name = "d" id = "d">

<input type = "button" value = "Go" onclick = "convert(this.form)">

</form>



<span id = "x1"></span><br>

<span id = "x2"></span><br>

<span id = "x3"></span><br>

<span id = "x4"></span><br>

<span id = "x5"></span><br>

<span id = "x6"></span><br>

<span id = "x7"></span><br>



<script type = "text/javascript">



function convert(form) {



        var a=Number(form.a.value);  // ensure that values are numbers

        var b=Number(form.b.value);

        var c=Number(form.c.value);

        var d=Number(form.d.value);

        

        var x1=a*62.428

        var x2=a*.03613;

        var x3=a*8.3454;

        var x4=b*1728;

        var x5=b*27.68;

        var x6=c*22.4140;

        var x7=d*359.05;

        

        document.getElementById('x1').innerHTML=x1;

        document.getElementById('x2').innerHTML=x2;

        document.getElementById('x3').innerHTML=x3;

        document.getElementById('x4').innerHTML=x4;

        document.getElementById('x5').innerHTML=x5;

        document.getElementById('x6').innerHTML=x6;

        document.getElementById('x7').innerHTML=x7;        



}







</script>

Be aware that JScript (Internet Explorer's equivalent to JavaScript) automatically maps HTML fields with names and ids to the equivalent variable in JScript so you should avoid using the same name in both places. This is one of the most of the most common reasons for scripts, that run quite nicely in most web browsers, to malfunction when you test them in Internet Explorer. If the variable with the dupliacte name is a global variable, the script will fail.

Why should I do anything for posterity? What has posterity ever done for me? - Groucho Marx (1890 - 1977)

I think I've got it working now... not sure what was going on, but it seems to be working OK.

Thanks everyone!