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

Question

我在HTML中创建了一个table，一行三列。它们是 sumName、sumEmail 和 sumCard。我想从 ID 为 commentNameA、commentEmailA 和 commentCardA 的另一个 table 获取文本值，并将它们相应地传输到总和 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 将内部 HTML 存储为字符串，而不是 DOM 中对此属性的引用。因此，当您更改 position[i] = sumShow[k]; 时，您并没有修改 DOM，而只是更改了变量中的字符串。

要解决此问题，请将实际的 DOM 节点存储在例如posName 并将该值应用于循环内的内部 HTML：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>

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

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

javascript

arrays

loops

innerhtml

getelementbyid