のjavascript：プロパティを読み取ることができませんヌル

Question

の「の値は、」しばらくしようとして、各入力

の値を取得することはできません何らかの理由でエラーイム取得はapp.jsです：9キャッチされない例外TypeError：との問題を抱えているようだ26

私のhtml

<div class="row"> 
     <div class="col-2"> 
     <form> 
      <div class="form-group"> 
      <label for="Age">Age</label> 
      <input type="number" class="form-control age" id="age" value="25"> 
      </div> 
      <div class="form-group"> 
      <label for="height">Height</label> 
      <input type="number" class="form-control" id="height" placeholder="Inches" value="167"> 
      </div> 
      <div class="form-group"> 
      <label for="weight">Weight</label> 
      <input type="number" class="form-control" id="weight" placeholder="lbs" value="255"> 
      </div> 
      <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-primary active"> 
       <input type="radio" name="options" id="male" >Male 
      </label> 
      <label class="btn btn-primary"> 
       <input type="radio" name="options" id="female">Female 
      </label> 
      </div> 
     </form> 
     <div class="dropdown"> 
      <button class="btn btn-secondary dropdown-toggle" 
      type="button" id="dropdownMenu1" data-toggle="dropdown" 
      aria-haspopup="true" aria-expanded="false"> 
      Activity Level 
     </button> 
     <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
      <a class="dropdown-item" href="#!">Basic Metabolic Rate</a> 
      <a class="dropdown-item" href="#!">Sedentry</a> 
      <a class="dropdown-item" href="#!">Lightly Active (Exercise 1-3 Times a Week)</a> 
      <a class="dropdown-item" href="#!">Moderatly Active (Exercise 3-5 Times a Week)</a> 
      <a class="dropdown-item" href="#!">Very Active (Exercise 6-7 Times a Week) </a> 
      <a class="dropdown-item" href="#!">Extra Active (Very Hard Exercise/Physical Job) </a> 
     </div> 
    </div> 
    <button class="btn btn-lg"type="button" name="calculate" onclick="getProtein()" id="calculate">Calculate</button> 
    </div> 
    </div> 
    <span id="totalProtein"> 0 </span> 


my script 


function getProtein() { 

    const age = document.getElementById('age').value; 
    const height = document.getElementById('height').value; 
    const weight = document.getElementById('weight').value; 

    let result = 0; 

    if(document.getElementById('male').checked) { 
    return result = 66.47 + (13.75 * weight) + (5.0 * height - (6.75 * age)); 
    }else if (document.getElementById('female')) { 
    return result = 66.47 + (13.75 * weight) + (5.0 * height - (6.75 * age)); 
    } 

    document.getElementById('totalProtein').innerHTML = Math.round(result); 

} 


document.getElementById('calculate').onClick = getProtein(); 

：app.jsで ：getProtein（9 app.js）でヌル のプロパティ '値' を読み込めません.value、.checked、および.innterHTMLです。

誰もがこれに光を当てることができますか？

Answer 1

あなたはあまりにも早くgetProtein関数を呼び出す可能性があるので、あなたの入力フィールドには、この行で、まだ照会する準備ができていない。

document.getElementById('calculate').onClick = getProtein; 

：

document.getElementById('calculate').onClick = getProtein(); 

あなたはこの行を書き換えることができます既に要素にgetProtein機能を割り当てているため、削除してください：

<button class="btn btn-lg"type="button" name="calculate" onclick="getProtein()" id="calculate">Calculate</button> 

これが役に立ちます。