不確定の 'innerHTML'プロパティを設定できません

Question

私は食べ物の量に基づいてテーブルに栄養のデータを与える栄養のウェブサイトを作ろうとしています。私は入力ボックスで食べる食べ物の量を入力し、ボタンを押して、caculationを実行し、特定の食物の多量栄養素の数をテーブルに入れてセルに入れます。私はこのコードを書く初期段階にあり、かなり基本的で、最終的にはもっと複雑になるでしょうが、私は立ち往生しています。

私が書いたコードは正しいデータセルに正確な量の多量栄養素を入れますが、コンソールには「Uncaught TypeError：未定義のinnerHTMLプロパティを設定できません」と表示されます。エラーはforループのコードの最後の行にあります。このエラーは、forループが無効になった後に書き込むコードをレンダリングしているようです。誰かがこのエラーが発生する理由と私のミスを修正する方法を説明できますか？私のコードは以下の通りです。

**これは私が達成しようとしているものに対して実装するのに最も効率的なコードではないかもしれませんが、私はコードを書くための全く別の方法を提示するのではなく、私の質問に答えると、より強力なコードの書き方（JSではなく、Jqueryでのsoley）に関する追加のアドバイスが確実に歓迎されます。あなたの時間をありがとう。

<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

あなたは炭水化物のクラス名にタイプミスがありました。あなたのカテゴリとブロッコリーの配列に3つの要素しかないときも、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>