title: Get a rows of number inside a textbox inside a table and compute its total
body: <p>I have this table and in the last column, there is rows of number inside a textbox. I'm trying to loop through those rows and get each number inside the text box. Once all the numbers are gathered, all of it will be added. I'm looking to for it to be added once I click the &quot;calculate&quot; button.</p>
  <p>I tried taking the content of the cell vie tableName.rows[n].cells[n].innerHTML but that does not work coz the text it still inside the text box. I'm not even sure if that's how you get a text inside table cells/</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let mealObj = {
    menu1: {
      menuName: "Steak",
      ingr1: {
        name: "Butter",
        ingrType: "other",
        amount: "2",
        amountType: "tbsp",
        cal: "10",
      },
      ingr2: {
        name: "Parsley",
        ingrType: "vegetable",
        amount: "1",
        amountType: "tsp",
        cal: "1",
      },
      ingr3: {
        name: "Garlic",
        ingrType: "vegetable",
        amount: "1/2",
        amountType: "tsp",
        cal: "20",
      },
      ingr4: {
        name: "Soy Sauce",
        ingrType: "other",
        amount: "1/4",
        amountType: "tsp",
        cal: "20",
      },
      ingr5: {
        name: "Beef",
        ingrType: "meat",
        amount: "3/4",
        amountType: "lbs",
        cal: "200",
      },
      ingr6: {
        name: "Salt",
        ingrType: "other",
        amount: "1/8",
        amountType: "tsp",
        cal: "0",
      },
      ingr7: {
        name: "Pepper",
        ingrType: "other",
        amount: "1/8",
        amountType: "tsp",
        cal: "2",
      },
    },
  }
  
  let ingrTable = document.getElementById("ingr-table");
  objToTable(mealObj);
  
  function objToTable(ingrList) {
  let totalRowLength = ingrTable.rows.length;
    for (let i in ingrList) {
      for (let k in ingrList[i]) {
        if (ingrList[i][k].name !== undefined) {
            let tableAmount = document.createElement("INPUT");
            tableAmount.setAttribute("type", "number");
            tableAmount.id = "table-amount";
            let tableCalNum = document.createElement("INPUT");
            tableCalNum.setAttribute("type", "number");
            tableCalNum.id = "table-cal";
  
            let row = ingrTable.insertRow(totalRowLength);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            cell1.innerHTML = ingrList[i][k].name;
            cell2.appendChild(tableAmount);
            tableAmount.value = eval(ingrList[i][k].amount);
            cell3.innerHTML = ingrList[i][k].amountType;
            cell4.appendChild(tableCalNum);
            tableCalNum.value = ingrList[i][k].cal;
        }
      }
    }
  }
  
  let button = document.getElementById("button");
  let calculateBtn = document.createElement("BUTTON");
  calculateBtn.innerHTML = "Calculate";
  button.appendChild(calculateBtn);
  
  calculateBtn.addEventListener("click", function () {
    for (let i = 0; i &lt; ingrTable.rows.length; i++) {
      calNum = document.getElementById("table-cal");
      console.log(calNum.value);
      //console.log(ingrTable.rows[i].cells[3]);
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="button"&gt;&lt;/div&gt;
  &lt;table id="ingr-table"&gt;
            &lt;tr&gt;
              &lt;th&gt;Ingredient&lt;/th&gt;
              &lt;th colspan="2"&gt;Amount&lt;/th&gt;
              &lt;th&gt;Calorie&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
            &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>