table input to output via loop javascript

Question

I'm trying to make a simple function where the user enters some inputs (only numbers) in a table. The inputs will be recalculated and return a new number in the table-row below. (There will be different calculations for each row, but if I can get some help figuring this first one out, I should be able to do the rest myself.)

The code below works for the first row, but it feels unnecessarily cumbersome. I think I should be able to just iterate through the values to get the output, instead of doing it manually. It really bugs me that I can't get it :(

I wish to onöy use vanilla js for this. Thanks!

HTML:

<!-- FORM 4-->
        <form id="F3" class="form">
          <table>
            <caption>
              <strong>Header</strong>
            </caption>
            <!-- Row-1 Table-4 -->
            <tbody id="tb3">
              <tr class="row1">
                <th scope="row">Price 1</th>
                <td>
                  <input type="number" id="r6c0" value="0" />
                </td>
                <td>
                  <input type="number" id="r6c1" value="0" />
                </td>
                <td>
                  <input type="number" id="r6c2" value="0" />
                </td>
                <td>
                  <input type="number" id="r6c3" value="0" />
                </td>
                <td>
                  <output class="any1"></output>
                </td>
              </tr>
              <!-- Row-2 Table-4 -->
              <tr class="output1">
                <th scope="row">Price 2</th>
                <td>
                  <output id="r7c0" class="any">7</output>
                </td>
                <td>
                  <output id="r7c1" class="any">6</output>
                </td>
                <td>
                  <output id="r7c2" class="any">5</output>
                </td>
                <td>
                  <output id="r7c3" class="any">4</output>
                </td>
                <td>
                  <output class="any1"></output>
                </td>
              </tr>
              <!-- Row-3 Table-4 -->
              <tr>
                <th scope="row">Diff Prices (%)</th>
                <td>
                  <output id="r8c0">8</output>
                </td>
                <td>
                  <output id="r8c1">0</output>
                </td>
                <td>
                  <output id="r8c2">0</output>
                </td>
                <td>
                  <output id="r8c3">0</output>
                </td>
                <td>
                  <output></output>
                </td>
              </tr>
              <!-- Row-4 Table-4 -->
              <tr>
                <th scope="row">Win</th>
                <td>
                  <output id="r9c0">9</output>
                </td>
                <td>
                  <output id="r9c1">0</output>
                </td>
                <td>
                  <output id="r9c2">0</output>
                </td>
                <td>
                  <output id="r9c3">0</output>
                </td>
                <td>
                  <output class="sum"></output>
                </td>
              </tr>
              <!-- Row-5 Table-4-->
              <tr>
                <th scope="row">Loss</th>
                <td>
                  <output id="r10c0">10</output>
                </td>
                <td>
                  <output id="r10c1">0</output>
                </td>
                <td>
                  <output id="r10c2">0</output>
                </td>
                <td>
                  <output id="r10c3">0</output>
                </td>
                <td>
                  <output class="sum"></output>
                </td>
              </tr>
            </tbody>
          </table>
        </form>

JS:

const form = document.querySelector("#F3");
let f3 = form;
f3.onchange = editInput;

function editInput() {
  const rowInput = document.querySelectorAll(".row1 input");
  const anyRow = document.querySelector("#tb3").getElementsByClassName("any");

  for (k = 0; k < anyRow.length; k++) {
    for (i = 0; i < rowInput.length; i++) {
      anyRow[0].innerHTML = rowInput[0].value - 1;
      anyRow[1].innerHTML = rowInput[1].value - 1;
      anyRow[2].innerHTML = rowInput[2].value - 1;
      anyRow[3].innerHTML = rowInput[3].value - 1;
    }
  }
}

https://jsfiddle.net/battleaxe/0d4f5gvs/3/

Answer 1

You can utilize forEach with the index overload to get the same affect like this :

function editInput() {
  const rowInput = document.querySelectorAll(".row1 input");
  const anyRow = document.querySelector("#tb3").getElementsByClassName("any");
   rowInput.forEach((i,ix)=>{anyRow[ix].innerHTML = i.value -1});
  
}

Fiddle