私のフィートのメートルのコンバータの期待値を得ていません。 VanillaJS please、ありがとう

Question

//私はフィートの入力からメートルで結果を得ようとしています。

  <div id="inner-wrapper"> 
       <label for="feet-input">Enter feet 
       </label> 
       <input type="number" id="feet-input" placeholder="Feet"> 

       <label for="result">Result 
       </label> 
       <div id="result"></div> 

       <button id="calculate" onclick="calculate()">Calculate</button> 
       <button id="clear" onclick="clear()">Clear</button> 
      </div> 

//任意の数値に対して、私は答えとして0を得ます。

 var feetInput = document.getElementById("feet-input").value; 
     var result = document.getElementById("result");  
     var total; 

     function calculate(){ 
      total = feetInput * 0.3048; 
      result.innerHTML = total; 
      return total; 


     } 

      function clear(){ 
       feetInput.value = ""; 
       result.value = ""; 

      } 



    //For any number I type get 0 as result. 

任意の数字については、答えとして0を入力します。

Answer 1

あなたが関数呼び出しには常に最新の値を取得する必要があります一度あなたが持っている唯一の問題は、feet-inputから値がONLYであるということである

//var feetInput = document.getElementById("feet-input").value;//only executed once 
 
     var result = document.getElementById("result");  
 
     var total; 
 

 
     function calculate(){ 
 
     var feetInput = document.getElementById("feet-input").value; 
 
      total = feetInput * 0.3048; 
 
      result.innerHTML = total; 
 
      return total; 
 

 

 
     } 
 

 
      function clear(){ 
 
       feetInput.value = ""; 
 
       result.value = ""; 
 

 
      } 
 

 

 

 
    //For any number I type get 0 as result.

<div id="inner-wrapper"> 
 
       <label for="feet-input">Enter feet 
 
       </label> 
 
       <input type="number" id="feet-input" placeholder="Feet"> 
 

 
       <label for="result">Result 
 
       </label> 
 
       <div id="result"></div> 
 

 
       <button id="calculate" onclick="calculate()">Calculate</button> 
 
       <button id="clear" onclick="clear()">Clear</button> 
 
      </div>

Answer 2

次のようにあなたのvar feetInput = document.getElementById("feet-input").value;にのみ実行されるためページが読み込まれたときに読み込みます。 計算を行う前に、feet-inputの値を取得する必要があります。

だけですぐにfunction calculate(){

Codepen後の行にvar feetInput = document.getElementById("feet-input").value;を追加します。https://codepen.io/DeathCamel57/pen/xPPGrp?editors=0010