Question

我正在尝试建立一个营养网站，根据一个人吃的食物量提供营养数据。我将在输入框中输入我吃的食物量并按下按钮，进行计算，并将特定食物的常量营养素的数量放入表格中的单元格中。我正处于编写这段代码的初级阶段，所以它非常基础，最终会变得更复杂，但我被卡住了。

我编写的代码工作并将正确数量的常量营养素放入正确的数据单元格中，但控制台说“未捕获的TypeError：无法设置未定义的属性'innerHTML'。”错误发生在for循环中的最后一行代码中。这个错误似乎渲染了我在for循环后写的任何其他代码无效。有人可以解释为什么会出现这个错误以及我如何纠正我的错误？我的代码如下。

**虽然这可能不是我想要实现的最有效的代码，但我会欣赏并回答我的具体问题，而不是仅仅向我展示编写代码的完全不同的方式。一旦我的问题得到解答，任何关于更强的代码编写的建议（JS中的soley，而不是Jquery）肯定会受到欢迎。谢谢你的时间。

<table>
  <tr>
    <td>
      <input type="text" class="amount"></input>
    </td>
    <td class="carbs">
    </td>
    <td class="fiber">
    </td>
    <td class="protein">
    </td>
  </tr>
</table>

<button type="button" onclick="calc()">calculate</button>

<script>
var row = [];
var broccoli = [.5, .08, 1];

var amt = document.getElementsByClassName("amount");
var carbs = document.getElementsByClassName("carb");
var fiber = document.getElementsByClassName("fiber");
var protein = document.getElementsByClassName("protein");

var category = [carbs[0], fiber[0], protein[0]];

function calc() {
  for (i = 0; i < 4; i++){
    row.splice(i, 0, broccoli[i]*amt[0].value);
    category[i].innerHTML = row[i].toFixed(2);
  }
}
</script>

Answer 1

碳水化合物类名称中有拼写错误。当你的类别和西兰花阵列只有三个元素时，你也会循环4次。使用您循环播放的数组的.length属性最安全。

<script>
    var row = [];
    var broccoli = [.5, .08, 1];

    var amt = document.getElementsByClassName("amount");
    var carbs = document.getElementsByClassName("carbs"); //typo
    var fiber = document.getElementsByClassName("fiber");
    var protein = document.getElementsByClassName("protein");

    var category = [carbs[0], fiber[0], protein[0]];

    function calc() {
      for (i = 0; i < category.length; i++){ // update limit to 3 or .length of array
        row.splice(i, 0, broccoli[i]*amt[0].value);
        category[i].innerHTML = row[i].toFixed(2);
      }
    }
</script>

无法设置undefined

1 个答案: