www.webdeveloper.com
Results 1 to 12 of 12

Thread: Calculator Help

  1. #1
    Join Date
    Feb 2014
    Posts
    11

    Calculator Help

    Hey everyone! I need some help again, on a calculator I'm trying to develop. Basically I've a selector in html and besides that an input where you can add a number. The selector contains some options and each one of the options has a value assigned to it. What I want to do is to get that value of the option and multiply it with the number of the input and get the result as an altert. This is what I've so far:


    HTML Code:
    <select name="Elements" id="a"> 
    	<option value="0">(Selecciona un element)</option>
    	<option value="1">Hidrogen</option> 
    	<option value="2">Liti</option> 
    	<option value="3">Berili</option> 
    	<option value="4">Bor</option>
    </select>
    <input type="text" maxlength="2" id="b"> 
    <input type="submit" value="Calculate" name="Caltulate" onclick="Multiply(document.getElementById('a').value,document.getElementById('b').value);">
    Code:
    <script>
    	function mol (a,b) {
    	var r = Number(a)*Number(b);
    	alert(r);	
    	}
    </script>
    I know both codes aren't probably what I need, since I want to get the value of the selector not the id, so that needs to be fixed as well as the javascript code. Thanks for your help!

  2. #2
    Join Date
    Feb 2014
    Posts
    11
    Just realised I copypasted the wrong js code, this is the good one:
    Code:
    <script>
    	function Multiply (a,b) {
    	var r = Number(a)*Number(b);
    	alert(r);	
    	}
    </script>

  3. #3
    Join Date
    Oct 2013
    Posts
    559
    I'm not exactly sure what you're looking for, but try this:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>calculator</title>
    <script>
    	function Multiply (x,y) {
    	var a = x.value,
    	    b = y.value,
    	    r = a*b;
    	alert(r);	
    	}
    </script>
    </head>
    <body>
    <select name="Elements" id="a"> 
    	<option value="0">(Selecciona un element)</option>
    	<option value="1">Hidrogen</option> 
    	<option value="2">Liti</option> 
    	<option value="3">Berili</option> 
    	<option value="4">Bor</option>
    </select>
    <input type="text" size="3" maxlength="2" id="b"> 
    <input type="submit" value="Calculate" name="Caltulate" onclick="Multiply(a,b)">
    </body>
    </html>

  4. #4
    Join Date
    Feb 2014
    Posts
    11
    Thanks! That was was I needed!! Just another question related to this, if I want to locate the result I get (r) on an input tag instead of just alerting it, how is that done?

  5. #5
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    You would append the result to the input's value attribute, however, I would prefer to use a separate HTML element, whether it be a <div>, <span>, <p>, etc... just so it will never conflict with any user input, unless you're doing this as an attempt to use a previously calculated result.

  6. #6
    Join Date
    Feb 2014
    Posts
    11
    You are definitely right. I think displaying the result is something like a <p> is what is going to work best. So, how is that done? Thanks for your help

  7. #7
    Join Date
    Oct 2013
    Posts
    559
    Replace alert(r); in the javascript with
    Code:
    document.getElementById("result").innerHTML = r;
    In your HTML add this below the submit button:
    HTML Code:
    <p id="result"></p>
    Another way:
    HTML Code:
    <p>Your result: <span id="result"></span></p>

  8. #8
    Join Date
    Feb 2014
    Posts
    11
    I'm getting NaN as result, instead of the number I should get with that code. Any suggestions?

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Arrow

    Quote Originally Posted by bellanko View Post
    I'm getting NaN as result, instead of the number I should get with that code. Any suggestions?
    Show the code that you are currently using.
    It would appear to be an easy fix when we can see what *you* are using and not snippets of code you might have pasted incorrectly.

  10. #10
    Join Date
    Feb 2014
    Posts
    11
    Nevermind, I found where my mistake was! Thanks everyone for the help provided!

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415
    Quote Originally Posted by bellanko View Post
    Nevermind, I found where my mistake was! Thanks everyone for the help provided!
    So why not share your discovery to help others that might find themselves in the same predicament?

  12. #12
    Join Date
    Feb 2014
    Posts
    11
    The code that Kevin2 gave me worked, I had sintax mistake caused by the multiple copy pastes I had to do!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles