I am trying to make an annual salary calculator using Javascript. Here is what I have so far:

<div id="fulldiv">
		<p> Enter the following information to calculate your annual salary.</p>
					
		<p>Hourly Wage:
		<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
					
		<p>Hours Per Week:
		<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
		
		<button value="calculate" onclick="calcSalary()">Calculate</button></p>
		
		<p id="results"></p>
					
		<script type="text/javascript">
		
		function calcSalary() {
		var wage_element = document.getElementById('txt_wage');
		var wage = parseInt(wage_element.value);
		var hours_element = document.getElementById('txt_hours');
		var hours = parseInt(hours_element.value);
		var calculate = wage_element * hours_element * 52;
		document.getElementByID('results').innerHTML = calculate;
		}
		</script>
				
					
				

</div>

I am trying to make an annual salary calculator using Javascript. Here is what I have so far:

<div id="fulldiv">
		<p> Enter the following information to calculate your annual salary.</p>
					
		<p>Hourly Wage:
		<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
					
		<p>Hours Per Week:
		<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
		
		<button value="calculate" onclick="calcSalary()">Calculate</button></p>
		
		<p id="results"></p>
					
		<script type="text/javascript">
		
		function calcSalary() {
		var wage_element = document.getElementById('txt_wage');
		var wage = parseInt(wage_element.value);
		var hours_element = document.getElementById('txt_hours');
		var hours = parseInt(hours_element.value);
		var calculate = wage_element * hours_element * 52;
		document.getElementByID('results').innerHTML = calculate;
		}
		</script>
				
					
				

</div>

When I click the button, nothing happens. Any thoughts?

• javascript

• 2 Java (not to be confused with JavaScript or JScript) – chrylis -cautiouslyoptimistic- Commented Apr 6, 2017 at 21:34

3 Answers 3

Some typos in there. I have slightly rewritten and simplified the code to ensure the a) your calculations are on the value of the inputs and b) you are using labels to provide the text relative to the inputs - not p's.

function calcSalary() {
 var wage = parseFloat(document.getElementById('txt_wage').value);
 var hours = parseFloat(document.getElementById('txt_hours').value);
 var calculate = wage * hours * 52;
 
 document.getElementById('results').innerHTML = calculate;
}

<div id="fulldiv">
 <p> Enter the following information to calculate your annual salary.</p>
 <label for="txt_wage">Hourly Wage:</label>
 <input type="text" name="wage" id="txt_wage" value ="0.00"/>
					
 <label for="txt_hours">Hours Per Week:</label>
 <input type="text" name="hours" id="txt_hours" value= "0.0"/>   
  <br/><br/>
 <button value="calculate" onclick="calcSalary()">Calculate</button>
 <p id="results"></p>
</div>

You code needs to be adjusted

var calculate = wage_element * hours_element * 52;

Should be changed into

var calculate = wage * hours * 52;

The problem is that you're calculating the element instead of the values.

@Gerard beat me to it by a minute, but here's the working code.

<div id="fulldiv">
		<p> Enter the following information to calculate your annual salary.</p>
					
		<p>Hourly Wage:
		<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
					
		<p>Hours Per Week:
		<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
		
		<button value="calculate" onclick="calcSalary()">Calculate</button></p>
		
		<p id="results"></p>
					
		<script type="text/javascript">
		
		function calcSalary() {
      var wage_element = document.getElementById('txt_wage');
      var wage = parseInt(wage_element.value);
      var hours_element = document.getElementById('txt_hours');
      var hours = parseInt(hours_element.value);
      
      var calculate = wage * hours * 52;
      document.getElementById('results').innerHTML = calculate;
		}
		</script>
				
					
				

</div>