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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    need help with simple calculator

    I have been having problems adding checkboxes and option selects in the same function..

    Here's what I have.

    Code:
      <script type="text/javascript">
            function bonuscalc() {
                var aaaa = document.getElementById("aaaa").value;
                var bbbb = document.getElementById("bbbb").value;
    	    var cccc = document.getElementById("cccc").value;
    	    if (dddd.checked){
    		var dddd = document.dddd.value = 2;
    		} 
    		else {
    		var dddd = document.dddd.value = 1;
    		}
    	    var eeee = document.getElementById("eeee").value;
                var bonus = aaaa* bbbb * dddd * cccc * eeee;
    	    var roundbonus = Math.round(bonus*10)/10;
                
                document.getElementById("roundbonus").value = roundbonus;
            }
    
        </script>
    Javascript first.. The part I'm not sure about is the if/else part for checbox.

    Now the html:

    Code:
    <form action="" id="calc1">
    <table width="100%">
    <tbody>
    <tr>
    <td>A status:   <select id="aaaa">
          		 		<option value="1.1">A1</option>
            	    	        <option value="1.02">A2</option>
            			<option value="1">A3</option>
            			<option value="0.95">A4</option>
       				</select>  
    </td>   
     <td>B status: <select id="bbbb">
                            <option value="1">0%</option>
                            <option value="0.99">1%</option>
                            <option value="0.98">2%</option>
                            <option value="0.97">3%</option>
                            <option value="0.96">4%</option>
                            <option value="0.95">5%</option>
                            <option value="0.94">6%</option>
                            <option value="0.93">7%</option>
                            <option value="0.92">8%</option>
                            <option value="0.91">9%</option>
                            <option value="0.90">10%</option> 
                          </select>    
    </td>
                
    <td>E status:<input id="eeee" type="text" />
    </td>
    
    <td>D status:   <input id="dddd" name="dddd" type="checkbox">
    </td>
                    
    <td>C status:   <select id="cccc">
            	          <option value="1">No</option>
                              <option value="1.2">Yes</option>
       		        </select>
    </td>
    </tr>                          
    <tr>
    <td width="100%">
         <input type="button" value="Submit" onclick="bonuscalc()" />
         <br /> 
     Result: <input type="text" readonly="readonly" id="roundbonus" />
    </td>
    </tr>
    </tbody>
    </table>
    </form>
    I hope it's not too confusing.
    The idea is to assign value 2 if the checkbox is checked and value 1 is it isn't..

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Consider:
    Code:
    	    if (document.getElementById('dddd').checked){
    and, this is an invalid assignment
    var dddd = document.dddd.value = 2;

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok I've changed it to (taking out the part in question):

    Code:
    		if (document.getElementById('dddd').checked)
    			{
    			document.getElementById('dddd').value = 2;
    			} 
    			else { document.getElementById('dddd').value = 1;
    			}
    Everything else is the same.

    If I enter a number, check the checbox and click Submit I get a NaN in the result box (whatever that means?).. but when I click it again I get the right result.

    What did I do wrong?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts
    'NaN' means "not a number".

    Somewhere in your code you are trying to use a value that is probably a string instead of a number in your calculations. Where is the problem? I have no idea because you have posted only a portion of your program.

    Look up the use of parseInt(), parseFloat(), or Number() in relation to NaN for further explanations.

  • Users who have thanked jmrker for this post:

    empty42 (12-14-2010)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    var aaaa = Number(document.getElementById("aaaa").value);
    var bbbb = Number(document.getElementById("bbbb").value);
    var cccc = Number(document.getElementById("cccc").value);
    Also if you do not provide an initial option "Please select..." or whatever your select lists require an option to be selected as otherwise there is no value to be passed.
    <option value="1.1" selected >A1</option>

    var eeee = document.getElementById("eeee").value;
    There is no validation to ensure that eeee is a number

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 12-12-2010 at 07:45 AM.

  • Users who have thanked Philip M for this post:

    empty42 (12-14-2010)

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I've been trying to figure it out myself for several hours. Without luck :P

    Here's the whole code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript">
            function bonuscalc() {
                var status1 = Number(document.getElementById("status").value);
                var tax1 = Number(document.getElementById("tax").value);
    	    var system1 = Number(document.getElementById("system").value);
    	    var checkbox1 = Number(document.getElementById("checkbox").value);
    	    if (Number(document.getElementById("checkbox").value.checked))
    	    {
    	      document.getElementById("checkbox").value = 2;
    	    } 
    	    else { document.getElementById("checkbox").value = 1;
    	    }
    	    var res1 = Number(document.getElementById("res").value);
                var bonus = status1 * tax1 * system1 * checkbox1 * res1;
    	    var roundbonus = Math.round((bonus*10)/10);
                
                document.getElementById("roundbonus").value = roundbonus;
             }
    
    </script>
    
    </head>
    
    <body>
    
    <br /><br /><p>
    <form action="" id="calc">
    <table width="100%">
    <tbody>
    <tr>
    <td>Status:   <select id="status">
          		 		<option value="1.1" selected>1.1</option>
            	    	        <option value="1.02">1.02</option>
            			<option value="1">1</option>
            			<option value="0.95">0.95</option>
       				</select>  
    </td>   
            
    <td>Tax: <select id="tax">
                <option value="1" selected>0%</option>
                <option value="0.99">1%</option>
                <option value="0.98">2%</option>
                <option value="0.97">3%</option>
                <option value="0.96">4%</option>
                <option value="0.95">5%</option>
                <option value="0.94">6%</option>
                <option value="0.93">7%</option>
                <option value="0.92">8%</option>
                <option value="0.91">9%</option>
                <option value="0.90">10%</option> 
              </select>    
    </td>
                
    <td>Res:<input id="res" type="text" /></td>
    
    <td>Checkbox:   <input id="checkbox" name="checkbox" type="checkbox"></td>
                    
    <td>System:   <select id="system">
            					   <option value="1" selected>No</option>
             				       	   <option value="1.2">Yes</option>
       							   </select>
    </td>
    </tr>                          
                                   
                   
    <tr><td width="100%">
      <input type="button" value="Submit" onclick="bonuscalc()" />
     <br />
     Result: <input type="text" readonly="readonly" id="roundbonus" />
    </td></tr>
        </tbody>
        </table></form>
    
    </body>
    </html>
    html is a bit messy.. I first want to get js to work before I start worrying about aestetics.

    The problem is the same. When I click Submit the Result first displays NaN and if you click Submit again it will show the right result.

    I've been adding and removing Number method, tried lots of possibilities, haven't got it to work properly.

    Any help (if anyone will bother with this :P) is much appreciated.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-

    Code:
    <script type="text/javascript">
    function bonuscalc() {
    var status1 = Number(document.getElementById("status").value);
    var tax1 = Number(document.getElementById("tax").value);
    var system1 = Number(document.getElementById("system").value);
    if (document.getElementById("checkbox").checked) { var cboxVal = 2 } 
    else { var cboxVal = 1 }
    var res1 = Number(document.getElementById("res").value);
    var bonus = status1 * tax1 * system1 * cboxVal * res1;
    var roundbonus = Math.round((bonus*10)/10);
    document.getElementById("roundbonus").value = roundbonus;
    }
    </script>
    If nothing is entered in the res box it returns 0, and then of course the result of the multiplication calculation is zero. You need to validate that res is a number greater than 0. The Number() method will not change characters such as qwerty into a number!


    "Never attribute to malice that which can be adequately explained by stupidity." - Napoleon Bonaparte

  • Users who have thanked Philip M for this post:

    empty42 (12-14-2010)


  •  

    Posting Permissions

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