如何修复未定义的数组

Question

I am fairly new to javascript so any assistance is appreciated.我对 javascript 相当陌生，因此感谢您提供任何帮助。 I am trying to collect 2 related inputs from a user and display the array object as a table.我正在尝试从用户收集 2 个相关输入并将数组对象显示为表格。 When the inputs are submitted however, the array is displaying as undefined.但是，当提交输入时，数组显示为未定义。 I am not sure where I am going wrong.我不确定我哪里出错了。 Any suggestions?有什么建议？

I have tried different methods of collecting the inputs off the form but none seem to work.我尝试了不同的方法来从表单中收集输入，但似乎都没有奏效。

 <!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>

the expected result is the array will display in a table as the user enters information.预期的结果是数组将在用户输入信息时显示在表格中。 the actual result is the array is undefined.实际结果是数组未定义。

Answer 1

There are several issues but the answer to your question about how to fix the flights array containing undefined is to change有几个问题，但关于如何修复包含undefined的flights数组的问题的答案是更改

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

to到

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

In your original add function you are pushing number and miles onto the flights array but number and miles are undefined variables so you are pushing undefined and undefined onto the flights array.在您的原始add函数中，您将number和miles number推送到flights数组上，但number和miles number是未定义的变量，因此您将undefined和undefined推送到flights数组上。

To also fix the other issues I'd suggest replacing your add and render functions with the follow为了解决其他问题，我建议用以下内容替换您的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('');
}

and changing your second <table> to <table id="outputTable"> .并将您的第二个<table>更改为<table id="outputTable"> 。

如何修复未定义的数组

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-07-19 23:04:04

如何修复未定义的数组

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-07-19 23:04:04

解决方案1
1 已采纳 2019-07-19 23:04:04