Question

尝试了一段时间，由于某种原因无法获得每个输入的值

错误即时获取是app.js：9未捕获的TypeError：无法读取null的属性“value” 在getProtein（app.js：9）在app.js：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();

.value，.checked和.innterHTML似乎有问题。

任何人都可以对此有所了解吗？

Answer 1

您可能过早地调用getProtein函数，因此您的输入字段尚未准备好进行查询，请使用以下行：

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

您可以重写此行：

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

或删除它，因为您已将getProtein功能分配给calculate元素：

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

希望这有帮助。

javascript没有读取输入值-Uncaught TypeError：无法读取null的属性“value”

1 个答案: