Question

我在尝试从数组中添加div的总数时遇到麻烦。我试图将输入的总里程数加到表中。我只想将里程数加起来，而不是航班号。我还想为其设置一个ID，以便可以调用另一部分中的总里程。

var FlightNumber = new Array();
var Miles = new Array();

function insert() {
  var FlightNumberValue = document.getElementById('FlightNumber').value;
  var MilesValue = document.getElementById('Miles').value;
  FlightNumber[FlightNumber.length] = FlightNumberValue;
  Miles[Miles.length] = MilesValue;
}

function showFlightNumber() {
  var content = "<b></b><br>";
  for (var i = 0; i < FlightNumber.length; i++) {
    content += FlightNumber[i] + "<br>";
  }
  document.getElementById('display').innerHTML = content;
}

function showMiles() {
  var content = "<b></b><br>";
  for (var i = 0; i < Miles.length; i++) {
    content += Miles[i] + "<br>";
  }
  document.getElementById('display2').innerHTML = content;
}

table,
th,
td {
  border: 1px solid black;
  text-align: center;
  border-collapse: collapse;
}

<form id="form">

  <h1>Find out what Flight Class Member you are!</h1>
  <p>To use, please input the flight number and number of miles.
    <p>

      <br>

      <label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" />
      <br>

      <label for="Miles">Miles</label><input id="Miles" type="text" />
      <br>

      <br>

      <input type="button" value="Save" onclick="insert();">
      <input type="button" value="Show flight number" onclick="showFlightNumber();"> <br>
      <input type="button" value="Show miles" onclick="showMiles();"> <br>

      <hr>
</form>

<table style="width:100%">
  <tr>
    <th>Flight Number</th>
    <th>Miles</th>
  </tr>
  <tr>
    <td>
      <div id="display">
      </div>
    </td>
    <td>
      <div id="display2">
      </div>
    </td>
  </tr>
  <td>Total Miles:</td>
  <td></td>
</table>

Answer 1

通过在合计栏上输入ID，我可以得出总里程数。然后，我可以使用您创建的Miles数组，只需将字符串值解析为int并将这些值总计。

请注意，此代码不是很干净。当您插入新的排期时，您实际上应该在插入新行，而不是换行。有一些javascript框架可以很容易地遍历数组，例如AngularJs / Angular / React / Vue.js。

<html>
    <head>
    <title>Member Info</title>
    <style> 
    table, th, td {
    border: 1px solid black;
    text-align: center;
    border-collapse: collapse;
    }
    </style>
   <script type="text/javascript">
var FlightNumber=new Array();
var Miles=new Array();

function insert(){
    var FlightNumberValue = document.getElementById('FlightNumber').value;
    var MilesValue = document.getElementById('Miles').value;
    FlightNumber[FlightNumber.length]=FlightNumberValue;
    Miles[Miles.length]=MilesValue;
  }

function showFlightNumber() {
  var content="<b></b><br>";
  for(var i = 0; i < FlightNumber.length; i++) {
     content +=FlightNumber[i]+"<br>";
  }
   document.getElementById('display').innerHTML = content;
}

function showMiles() {
  var content="<b></b><br>";
  for(var i = 0; i < Miles.length; i++) {
     content +=Miles[i]+"<br>";
  }
  document.getElementById('display2').innerHTML = content;
  // new code
  var total=0;
  for(var i = 0; i < Miles.length; i++) {
     total += Number.parseInt(Miles[i]);
  }
  document.getElementById('total-miles').innerHTML = total;
}

</script>
    </head>
        <body>

        <form id="form">

            <h1>Find out what Flight Class Member you are!</h1>
            <p>To use, please input the flight number and number of miles.<p>
        
        <br>

            <label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" /> 
        <br>

            <label for="Miles">Miles</label><input id="Miles" type="text" />
        <br>

        <br>

            <input type="button" value="Save" onclick="insert();">
            <input type="button" value="Show flight number" onclick="showFlightNumber();"> <br>
            <input type="button" value="Show miles" onclick="showMiles();"> <br>

        <hr>
        </form>

        <table style="width:100%">
                <tr>
                  <th>Flight Number</th>
                  <th>Miles</th> 
                </tr>
                <tr>
                  <td><div id="display">
                    </div></td>
                  <td><div id="display2">
                    </div></td> 
                </tr>
                    <td>Total Miles:</td>
                    <td id="total-miles"></td>
              </table>
        </body>

</html>

有没有一种方法可以添加一个div的总数？

1 个答案: