我希望一个数组在循环时显示另一个数组的值

Question

我在 HTML 中创建了一个表格，其中有一行和三列。这些是sumName、sumEmail 和sumCard。我想从另一个表中获取文本值，ID 为 commentNameA、commentEmailA 和 commentCardA，并让它们相应地转移到总 ID。

我尝试过使用不同的功能，但找不到合适的解决方案。

Java 脚本：

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>

没有错误。

Answer 1

例如posName 将 innerHTML 存储为字符串，而不是在 DOM 中对该属性的引用。所以当你 cange position[i] = sumShow[k]; 时，你并没有修改 DOM，而只是改变了变量中的字符串。

要解决这个问题，请将实际的 DOM 节点存储在例如posName 并将值应用于循环内的 innerHTML：position[i].innerHTML = sumShow[k];

我也认为没有理由使用不同的变量 i 和 k。您可以将 i 用于两个数组。如果输入不包含 HTML 代码而只包含字符串，您可以使用 textContent 属性而不是 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>