如何修复未定义的数组

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

有几个问题，但关于如何修复包含undefined的flights数组的问题的答案是更改

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 number推送到flights数组上，但number和miles number是未定义的变量，因此您将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('');
}

并将您的第二个<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