How to fix undefined array

Question

I am fairly new to javascript so any assistance is appreciated. I am trying to collect 2 related inputs from a user and display the array object as a table. 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

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.

To also fix the other issues I'd suggest replacing your add and render functions with the follow

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"> .

How to fix undefined array

Question

1 answers

solution1
1 ACCPTED 2019-07-19 23:04:04

How to fix undefined array

Question

1 answers

solution1 1 ACCPTED 2019-07-19 23:04:04

solution1
1 ACCPTED 2019-07-19 23:04:04