Question

我对javascript还是很陌生，因此不胜感激。我正在尝试从用户那里收集2个相关输入，并将数组对象显示为表格。但是，提交输入后，该数组将显示为未定义。我不确定我要去哪里错。有什么建议吗？

我尝试了多种方法来收集表单中的输入，但似乎没有一种方法。

 <!DOCTYPE html>
  <html>
  <head>
  <meta charset="ISO-8859-1">
  <title>Example:</title>
<script type="text/javascript">

var flights = [];

  function add(ele) {  
      flights.push(number, miles);
      render();
      document.getElementById("number").value = "";
      document.getElementById("miles").value = "";
  }
  function render() {

      document.getElementById("mydiv").innerHTML = "";
         thelisthtml = "";
         for(i = 0; i< flights.length; i++)
         thelisthtml += "<div class='card' id="+ i +"><div class='card-body'>";
         thelisthtml += "Flight  " + (i+1) + " : " + flights[i]  + "         " + "<button type='submit' onclick = 'clearToDo(this)' id="+ i +">Remove From List</button>";

      document.getElementById("mydiv").innerHTML = thelisthtml; 
     }

function calculateStatus(){

    var totalMiles = Number(document.getElementById("totalMiles").value);

     if (miles < 9999){
             tr = document.getElementById("table").rows[1];
                tr.style.backgroundColor = "yellow";
            }

            if (miles >= 10000 && miles <= 24999){
            tr = document.getElementById("table").rows[2];
            tr.style.backgroundColor = "yellow";
            }

            if (miles >= 25000){
            tr = document.getElementById("table").rows[3];
            tr.style.backgroundColor = "yellow";
            }                                   
}

function refreshPage() {
    window.location.reload();
} 

  </script>

</head>
<body>

<br>
    <table id="table" border ="1">
 <tr>
 <th>Medallion Status</th>
 <th>Level</th>
 </tr>
 <tr>
 <td>Bronze</td>
<td> < 10000 miles</td>
  </tr>
 <tr>
 <td>Silver</td>
 <td> < 25000 miles</td>
 </tr>
 <tr>
 <td>Gold</td>
 <td> > 25000</td>
 </tr>
  </table>  

   <h1><strong>Traveler Information </strong></h1><br> <br>
  Flight Number: <input type="text" id="number" name="number" value="" /> 
   <br> <br>
  Miles Flown: <input type="text" id="miles" name="miles" value=""/> <br> 
  <br>
   <input type="submit" value="Add Flight" id="go" onclick="add(this)"/>
    <p>----------------------------</p>
    <table>
    <thead>
    <tr>
     <th>Flight</th>
    <th>Miles</th>
  </tr>
   <thead>
  <tbody>
    <tr class="col-md-6" id="mydiv"></tr>
    </tbody>
   </table>
     <input type="reset" id="reset" name="Reset" value="Reset" 
     onclick="refreshPage()" /> <br> <br> <br> 
   <br> <br> 

   </body>
  </html>

预期结果是，当用户输入信息时，数组将显示在表中。实际结果是数组未定义。

Answer 1

有几个问题，但是关于如何解决包含return (IDialogueAnimation) Activator.CreateInstance(item, something, something);的{{1}}数组的问题的答案是更改

flights

到

undefined

在原始的function add(ele) { flights.push(number, miles); render(); document.getElementById("number").value = ""; document.getElementById("miles").value = ""; }函数中，您将function add() { const numberElem = document.getElementById("number"); const milesElem = document.getElementById("miles"); flights.push(numberElem.value, milesElem.value); render(); numberElem.value = ""; milesElem.value = ""; }和add推到number数组上，但是miles和flights是未定义的变量，因此您正在将number和miles推到undefined数组上。

要解决其他问题，建议您将undefined和flights函数替换为以下内容

add

，然后将第二个render更改为function add() { const numberElem = document.getElementById("number"); const milesElem = document.getElementById("miles"); flights.push({ number: numberElem.value, miles: milesElem.value}); render(); numberElem.value = ""; milesElem.value = ""; } function render() { const tbody = document.querySelector('#outputTable tbody'); tbody.innerHTML = flights.map((flight, i) => { return '' + '<tr>' + '<td>' + flight.number + '</td>' + '<td>' + flight.miles + '</td>' + '<td>' + `<button type='button' onclick="clearToDo(${i})">` + 'Remove From List' + '</button>' + '</td>' + '</tr>'; }).join(''); }。

如何修复未定义的数组

1 个答案: