尝试在JS和HTML中进行能量转换，获得0

Question

Objective: Looking to build an script which enables 'therm' to be converted to 'MWh'. In order to do so, the user would fill out the 'therm' input box, click the 'convert' button and the 'MWh' value should appear below.

Currently the code I have written is as follows:

 <p>Therm: <input type="number" id="thermid" name="therminput" /></p> <p> MWh: <span id="MWhid"></span></p> <p><input type="button" value="Submit" id="convertbutton" /></p> <script> var therm = document.getElementById("thermid").value; //This identifies the input field for therm var MWh = therm * 0.029307; //This determines the conversion from therm to MWh - something is wrong here //Below identifies when the button is clicked (eventlistener) then the 'innerHTML' displays the var MWh in the HTML field document.getElementById("convertbutton").addEventListener("click", function () { document.getElementById("MWhid").innerHTML = MWh; }) </script> 

Problem: The result is 0 regardless of the value that the user enters in the 'therm' field and I believe this is resulting from where var MWh is being determined. I don't appear to be able to get this correct. Could someone give me a hand?

Many thanks in advance, Ralph

Answer 1

You are not updating the calculation every time the button is clicked. The only time the following lines of code are run:

var therm = document.getElementById("thermid").value;
var MWh = therm * 0.029307;

are on the document load. Simply place them inside the event handler, so that their values get updated every time you click the button. Ie:

document.getElementById("convertbutton").addEventListener("click", function () {
  var therm = document.getElementById("thermid").value;
  var MWh = therm * 0.029307;
  document.getElementById("MWhid").innerHTML = MWh; 
})