I want one array to display the value of the other array when looped through

Question

I created a table in HTML, with one row and three columns. These are sumName, sumEmail & sumCard. I would like to get the text value from another table, with the ID's of commentNameA, commentEmailA & commentCardA and have them transfer accordingly to the sum ID's.

I have tried using different functions however i can't find the right solution.

Java Script:

function summary() {

    var sumShow = [name, email, card];
    var position = [posName, posEmail, posCard];

    var name = document.getElementById("commentNameA").value;
    var email = document.getElementById("commentEmailA").value;
    var card = document.getElementById("commentCardA").value;
    var posName = document.getElementById("sumName").innerHTML;
    var posEmail = document.getElementById("sumEmail").innerHTML;
    var posCard = document.getElementById("sumCard").innerHTML;



    for(var i = 0; i < 3; i++ ){
        var k = 0;
        position[i] = sumShow[k];
        k += 1;
        }

    }

HTML:

<form action=" " method=" " >
    <table id = "order">

      <tr>
        <td id = "commentName">Name:<input type="text" name="Name" id="commentNameA" class="name" placeholder="Enter Your Full Name" onkeyup="validateName()" ></td>
      </tr>

      <tr>
        <td id="commentEmail">Email:<input type="email" name="Email" id="commentEmailA" onkeyup="validateEmail()" class="email" placeholder="Enter Your Email"></td>
      </tr>

      <tr>
        <td id ="commentCard">Card:<input type="text" name="Card_Number" id="commentCardA" class="card" onkeyup="update(this.value)" placeholder="Enter a Proxy Credit Card Number" ></td>
      </tr>

      <tr>
        <td id="commentButton"><button id="commentForm" type="submit" name="submit" class="btn" >Submit Form</button></td>
      </tr>
   </table>
  </form> 

<div id="sumTable" class="summary">
    <table id="sumTableA" class="summaryTable" style="width:100%" >
    <tr>
    <th>Name</th>
    <th>Email</th> 
    <th>Card Number</th>
  </tr>
  <tr>
    <td id="sumName"> </td>
    <td id="sumEmail"> </td> 
    <td id="sumCard"> </td>
  </tr>
    <input id="sumBtn" onclick="summary()" type="submit" name="summary" class="sumBtn" value="summary" />
    </table>

</div>

There are no errors.

Answer 1

E.g. posName ist storing the innerHTML as a string and not a reference to this attribute in the DOM. so when you cange position[i] = sumShow[k];, you are not modifying the DOM but just changing the string inside the variables.

To fix this, store the actual DOM node in e.g. posName and apply the value to the innerHTML inside the loop: position[i].innerHTML = sumShow[k];

I can also see no reason to use the different variables i and k. You could use i for both array. And if the inputs do not contain HTML code but only strings, you could insert them with the textContent attribute instead of the innerHTML.

function summary() {

    var name = document.getElementById("commentNameA").value;
    var email = document.getElementById("commentEmailA").value;
    var card = document.getElementById("commentCardA").value;
    var posName = document.getElementById("sumName");
    var posEmail = document.getElementById("sumEmail");
    var posCard = document.getElementById("sumCard");
    
    var sumShow = [name, email, card];
    var position = [posName, posEmail, posCard];

    for(var i = 0; i < position.length; i++ ){
        position[i].textContent = sumShow[i];
    }
 }

<form action=" " method=" ">
  <table id="order">

    <tr>
      <td id="commentName">Name:<input type="text" name="Name" id="commentNameA" class="name" placeholder="Enter Your Full Name"></td>
    </tr>

    <tr>
      <td id="commentEmail">Email:<input type="email" name="Email" id="commentEmailA" class="email" placeholder="Enter Your Email"></td>
    </tr>

    <tr>
      <td id="commentCard">Card:<input type="text" name="Card_Number" id="commentCardA" class="card" placeholder="Enter a Proxy Credit Card Number"></td>
    </tr>
  </table>
</form>

<div id="sumTable" class="summary">
  <table id="sumTableA" class="summaryTable" style="width:100%">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Card Number</th>
    </tr>
    <tr>
      <td id="sumName"> </td>
      <td id="sumEmail"> </td>
      <td id="sumCard"> </td>
    </tr>
  </table>
  <input id="sumBtn" onclick="summary()" type="submit" name="summary" class="sumBtn" value="summary" />

</div>