0

Идея такая, хочу получить доступ к любой ячейке и задавать свойства или значения. Первый вариант работает, но с ним работать, нет смысла.

При запуске второго варианта возникает ошибка, что таблица пустая, и код дальше не работает. Почему? Область видимости или что то другое? Я искал в гугл, но так и не смог найти ответа.

Я пробую через замыкания это сделать, я только начал их учить, практиковать. Код я буду улучшать. Пока мне надо понять в чем проблема. Как должен работать мой код.

  1. Вызываем функцию, задаем ряд (rows1) где будем брать ячейку.
  2. Получаем таблицу. (Ведь таблица не пустая, но почему ошибка)?

    var table = document.getElementById('tableCinema');
    
  3. Получаем коллекции.
  4. Потом через метод получу элемент массива.

Правильно ли я его написал чтоб эти шаги были выполнены? Если есть ошибки, напишите что не так. Спасибо.

<table id="tableCinema" style="border-collapse: collapse;" border="1">
        <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Time</th>
        </tr>                   
        <tr>
            <td>1</td><td >*</td><td >*</td>
        </tr>                   
        <tr>
            <td>2</td><td >*</td><td >*</td>
        </tr>                   
        <tr>    
            <td >3</td><td >*</td><td >*</td>
        </tr>                   
        <tr>
            <td>4</td><td >*</td><td >*</td>
        </tr>           
    </table>    
    <button onclick="addObj()">add</button>

//*****************************************************

var arrMovies = [
     {name: "Simpsons", time: "14:20"},
     {name: "Zootopia", time: "18:30"},
     {name: "Avatar", time: "19:00"},
     {name: "Boss", time: "11:40"}
];

function addObj() {
  var table = document.getElementById('tableCinema');
  var trsTable = table.getElementsByTagName('tr');
  var tdsTable = trsTable[2].getElementsByTagName('td');

  function addValue(arrElem) {
    tdsTable[1].innerHtml = arrMovies[arrElem].name;
    tdsTable[2].innerHtml = arrMovies[arrElem].time;
  }
  tdsTable[1].innerHTML = arrMovies[3].name;
}

//Это второй вариант. 
function addObj2(rows1){
    var table = document.getElementById('tableCinema');

  //Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
  //TypeError: table is null
    var trsTable = table.getElementsByTagName('tr'); 
    var tdsTable = trsTable[rows1].getElementsByTagName('td');
    function addValue (arrElem) {
        tdsTable[1].innerHtml = arrMovies[arrElem].name;
        tdsTable[2].innerHtml = arrMovies[arrElem].time;
    }
    console.log(tdsTable[1].innerHTML);
}

var rows2 = addObj2(2);
rows2(1);
1
  • а зачем при вызове функции идет создание переменной, ведь ничего не возвращается var rows2 = addObj2(2); и второе, при вызове этой функции должно работать, а вот при нажатии на кнопку не передается аргумент в функцию addObj2 8 дек 2017 в 2:53

1 ответ 1

3

Во-первых, у вас идет дублирование кода addValue, это уже нехорошо.

Во-вторых, когда в форме мы вызываете addObj2 вы даете пустой параметр, поэтому он кричит это

 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

Он не может прочитать пустой параметр, вместо rows1 он кладет Null

var tdsTable = trsTable[rows1].getElementsByTagName('td');

В-третьих, вы определяете метод addValue, но нигде не используете ни в addObj, ни в addObj2, поэтому инфа нигде не добавляется.

В-четвертых, это уже совет. Используйте TextContent вместо InnerHtml

2
  • Спасибо за совет про TextContent, мощная вещь. 8 дек 2017 в 11:31
  • @МишаПодлевских Да не за что. 8 дек 2017 в 13:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.