Как исправить неопределенный массив

Я новичок в 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>

ожидаемый результат - массив будет отображаться в таблице по мере того, как пользователь вводит информацию. фактический результат - массив не определен.

Вы помещаете две переменные в массив Flights в методе add. Где вы устанавливаете эти переменные?

— 20.07.2019 01:04

javascript html arrays

20.07.2019 00:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

188

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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('');
}

и меняем второй <table> на <table id = "outputTable">.

Я заметил, что переменные не инициализированы после публикации, но я не видел других ошибок. Это имеет смысл, когда я смотрю на это так. Рокки спасибо. Я очень ценю советы.

— 20.07.2019 01:53

Без проблем. Рад помочь : )

— 20.07.2019 02:00

20.07.2019 01:04