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.

You're pushing two variables to the flights array in the add method. Where are you setting those variables? — James
– James, Commented Jul 19, 2019 at 23:04

Rocky Sims · Accepted Answer · 2019-07-19 23:33:34Z

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

edited Jul 19, 2019 at 23:33

answered Jul 19, 2019 at 23:04

Rocky Sims

3,6181 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Base Over a year ago

I noticed the variables not initialized error after I posted, but I didnt see the other errors. It makes perfect sense when I look at it like this. Rocky thank you. I really appreciate the tips.

Rocky Sims Over a year ago

No problem. Happy to help : )

Collectives™ on Stack Overflow

How to fix undefined array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related