Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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;
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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)

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;	
    
    }

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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)
    Last edited by Philip M; 11-23-2010 at 07:33 PM.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I've got it working now... not sure what was going on, but it seems to be working OK.

    Thanks everyone!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •