Is there any way to shorten this code in Javascript?-CodePudding

I'd like the numbers inputted at the top of the page to be displayed in the tables below, once I clicked the button and it creates a new row of 16 cells. I'd like to ask is there any way to shorten the code of function showNo() in the Javascript? Since both the var and the .innerHTML parts are so redundant now.

Thank you guys!

const btn1 = document.getElementById('btn1');
const tab = document.getElementById("tab");

btn1.addEventListener('click', () => {
  newCells();
  showNo();
});

function newCells() {
  let row = tab.insertRow(-1);

  for (var i = 0; i <= 15; i  ) {
    let c = row.insertCell(i);
    c.id = `R${row.rowIndex}C${  c.cellIndex}`;
  }
}

function showNo() {
  var txt1 = document.getElementById('inp1');
  var txt2 = document.getElementById('inp2');
  var txt3 = document.getElementById('inp3');
  var txt4 = document.getElementById('inp4');
  var txt5 = document.getElementById('inp5');
  var txt6 = document.getElementById('inp6');
  var txt7 = document.getElementById('inp7');
  var txt8 = document.getElementById('inp8');
  var txt9 = document.getElementById('inp9');
  var txt10 = document.getElementById('inp10');
  var txt11 = document.getElementById('inp11');
  var txt12 = document.getElementById('inp12');
  var txt13 = document.getElementById('inp13');
  var txt14 = document.getElementById('inp14');
  var txt15 = document.getElementById('inp15');
  var txt16 = document.getElementById('inp16');

  var R1C1 = document.getElementById('R1C1');
  var R1C2 = document.getElementById('R1C2');
  var R1C3 = document.getElementById('R1C3');
  var R1C4 = document.getElementById('R1C4');
  var R1C5 = document.getElementById('R1C5');
  var R1C6 = document.getElementById('R1C6');
  var R1C7 = document.getElementById('R1C7');
  var R1C8 = document.getElementById('R1C8');
  var R1C9 = document.getElementById('R1C9');
  var R1C10 = document.getElementById('R1C10');
  var R1C11 = document.getElementById('R1C11');
  var R1C12 = document.getElementById('R1C12');
  var R1C13 = document.getElementById('R1C13');
  var R1C14 = document.getElementById('R1C14');
  var R1C15 = document.getElementById('R1C15');
  var R1C16 = document.getElementById('R1C16');

  R1C1.innerHTML = txt1.value;
  R1C2.innerHTML = txt2.value;
  R1C3.innerHTML = txt3.value;
  R1C4.innerHTML = txt4.value;
  R1C5.innerHTML = txt5.value;
  R1C6.innerHTML = txt6.value;
  R1C7.innerHTML = txt7.value;
  R1C8.innerHTML = txt8.value;
  R1C9.innerHTML = txt9.value;
  R1C10.innerHTML = txt10.value;
  R1C11.innerHTML = txt11.value;
  R1C12.innerHTML = txt12.value;
  R1C13.innerHTML = txt13.value;
  R1C14.innerHTML = txt14.value;
  R1C15.innerHTML = txt15.value;
  R1C16.innerHTML = txt16.value;
}

th,
tr,
td {
  border: 1px solid black;
  padding: 5px;
  width: 40px;
  text-align: center;
}

<div id="data">
  <table id="inpdata">
    <tr>
      <td id="inpb1">Group 1</td>
      <td id="inpb2">Group 2</td>
      <td id="inpb3">Group 3</td>
      <td id="inpb4">Group 4</td>
    </tr>
    <tr>
      <td>
        <input type="number" id="inp1" title="inp1">
        <input type="number" id="inp2" title="inp2">
        <input type="number" id="inp3" title="inp3">
        <input type="number" id="inp4" title="inp4">
      </td>
      <td>
        <input type="number" id="inp5" title="inp5">
        <input type="number" id="inp6" title="inp6">
        <input type="number" id="inp7" title="inp7">
        <input type="number" id="inp8" title="inp8">
      </td>
      <td>
        <input type="number" id="inp9" title="inp9">
        <input type="number" id="inp10" title="inp10">
        <input type="number" id="inp11" title="inp11">
        <input type="number" id="inp12" title="inp12">
      </td>
      <td>
        <input type="number" id="inp13" title="inp13">
        <input type="number" id="inp14" title="inp14">
        <input type="number" id="inp15" title="inp15">
        <input type="number" id="inp16" title="inp16">
      </td>
    </tr>
  </table>
  <br>
  <button id="btn1">Add one line</button>
</div>

<br>

<div id="tables">
  <table id="tab">
    <tr>
      <th colspan="4">Group 1</th>
      <th colspan="4">Group 2</th>
      <th colspan="4">Group 3</th>
      <th colspan="4">Group 4</th>
    </tr>
  </table>
</div>

CodePudding user response：

Use the same idea you previously used with the for loop in your newCells function:

const btn1 = document.getElementById('btn1');
const tab = document.getElementById("tab");

btn1.addEventListener('click', () => {
  newCells();
  showNo();
});

function newCells() {
  let row = tab.insertRow(-1);

  for (var i = 0; i <= 15; i  ) {
    let c = row.insertCell(i);
    c.id = `R${row.rowIndex}C${  c.cellIndex}`;
  }
}

function showNo() {
  for (let i = 1; i <= 16; i  ) {
    let txt = document.getElementById(`inp${i}`);
    let cell = document.getElementById(`R1C${i}`);
    cell.innerHTML = txt.value;
  }
}

th,
tr,
td {
    border: 1px solid black;
    padding: 5px;
    width: 40px;
    text-align: center;
}

<div id="data">
  <table id="inpdata">
    <tr>
      <td id="inpb1">Group 1</td>
      <td id="inpb2">Group 2</td>
      <td id="inpb3">Group 3</td>
      <td id="inpb4">Group 4</td>
    </tr>
    <tr>
      <td>
        <input type="number" id="inp1" title="inp1">
        <input type="number" id="inp2" title="inp2">
        <input type="number" id="inp3" title="inp3">
        <input type="number" id="inp4" title="inp4">
      </td>
      <td>
        <input type="number" id="inp5" title="inp5">
        <input type="number" id="inp6" title="inp6">
        <input type="number" id="inp7" title="inp7">
        <input type="number" id="inp8" title="inp8">
      </td>
      <td>
        <input type="number" id="inp9" title="inp9">
        <input type="number" id="inp10" title="inp10">
        <input type="number" id="inp11" title="inp11">
        <input type="number" id="inp12" title="inp12">
      </td>
      <td>
        <input type="number" id="inp13" title="inp13">
        <input type="number" id="inp14" title="inp14">
        <input type="number" id="inp15" title="inp15">
        <input type="number" id="inp16" title="inp16">
      </td>
    </tr>
  </table>
  <br>
  <button id="btn1">Add one line</button>
</div>

<br>

<div id="tables">
  <table id="tab">
    <tr>
      <th colspan="4">Group 1</th>
      <th colspan="4">Group 2</th>
      <th colspan="4">Group 3</th>
      <th colspan="4">Group 4</th>
    </tr>
  </table>
</div>

CodePudding user response：

You can do away with the showNo() function altogether and use the for loop you already have in the newCells() function to assign the values there.

Check the updated code below:

const btn1 = document.getElementById('btn1');
const tab = document.getElementById("tab");

btn1.addEventListener('click', () => {
  newCells();
});

function newCells() {
  let row = tab.insertRow(-1);

  for (var i = 0; i <= 15; i  ) {
    let c = row.insertCell(i);
    let inpId = 'inp'   (i   1);
    let inpEl = document.getElementById(inpId);
    c.innerHTML = inpEl.value;
    c.id = `R${row.rowIndex}C${  c.cellIndex}`;
  }
}

th,
tr,
td {
  border: 1px solid black;
  padding: 5px;
  width: 40px;
  text-align: center;
}

<div id="data">
  <table id="inpdata">
    <tr>
      <td id="inpb1">Group 1</td>
      <td id="inpb2">Group 2</td>
      <td id="inpb3">Group 3</td>
      <td id="inpb4">Group 4</td>
    </tr>
    <tr>
      <td>
        <input type="number" id="inp1" title="inp1">
        <input type="number" id="inp2" title="inp2">
        <input type="number" id="inp3" title="inp3">
        <input type="number" id="inp4" title="inp4">
      </td>
      <td>
        <input type="number" id="inp5" title="inp5">
        <input type="number" id="inp6" title="inp6">
        <input type="number" id="inp7" title="inp7">
        <input type="number" id="inp8" title="inp8">
      </td>
      <td>
        <input type="number" id="inp9" title="inp9">
        <input type="number" id="inp10" title="inp10">
        <input type="number" id="inp11" title="inp11">
        <input type="number" id="inp12" title="inp12">
      </td>
      <td>
        <input type="number" id="inp13" title="inp13">
        <input type="number" id="inp14" title="inp14">
        <input type="number" id="inp15" title="inp15">
        <input type="number" id="inp16" title="inp16">
      </td>
    </tr>
  </table>
  <br>
  <button id="btn1">Add one line</button>
</div>

<br>

<div id="tables">
  <table id="tab">
    <tr>
      <th colspan="4">Group 1</th>
      <th colspan="4">Group 2</th>
      <th colspan="4">Group 3</th>
      <th colspan="4">Group 4</th>
    </tr>
  </table>
</div>

CodePudding user response：

Since all your elements seem to follow a pattern, you could:

const CELL_COUNT = 16; // could be used in newCells function as well

function showNo() {
  for (let i = 1; i <= CELL_COUNT; i  ) {
    document.getElementById(`R1C${i}`).innerHTML = document.getElementById(`inp${i}`).value;
  }
}

CodePudding user response：

You could put an event listener on the input table listening for an input event. The event handler would then update the output table.

I have done this in the snippet. The way I have done it is quite repetitive in terms of the HTML coding but I think that could be avoided with a bit of thought. The JavaScript is quite short.

I may have misunderstood what you are actually trying to do. For example whether it was important to generate the cells with JavaScript rather than hard code them with HTML as I have done.

const inpdataTable = document.querySelector('#inpdata');
    inpdataTable.addEventListener('input', function(event){
        const outputId = "out"   event.target.dataset.number;
        const outputCell = document.querySelector("#"   outputId);
        outputCell.innerHTML = event.target.value;
    })

th,
        tr,
        td {
            border: 1px solid black;
            padding: 5px;
            width: 40px;
            text-align: center;
        }

<div id="data">

        <table id="inpdata">
            <tr>
                <td id="inpb1">Group 1</td>
                <td id="inpb2">Group 2</td>
            </tr>
            <tr>
            <td>
                <input type="number" data-number="1" title="inp1">
                <input type="number" data-number="2" title="inp2">
                <input type="number" data-number="3" title="inp3">
                <input type="number" data-number="4" title="inp4">
            </td>
            <td>
                <input type="number" data-number="5" title="inp5">
                <input type="number" data-number="6" title="inp6">
                <input type="number" data-number="7" title="inp7">
                <input type="number" data-number="8" title="inp8">
            </td>
            </tr>
        </table>

        </div>

        <br>

        <div id="tables">
        <table id="tab">
            <tr>
            <th colspan="4">Group 1</th>
            <th colspan="4">Group 2</th>
            </tr>
            <tr>
                <td id="out1"></td>
                <td id="out2"></td>
                <td id="out3"></td>
                <td id="out4"></td>

                <td id="out5"></td>
                <td id="out6"></td>
                <td id="out7"></td>
                <td id="out8"></td>
            </tr>
        </table>
    </div>