Что вызывает консольную ошибку «Не удается прочитать свойство 'setAttribute' неопределенного в HTMLTableRowElement" - PullRequest
Новая
       52

Что вызывает консольную ошибку «Не удается прочитать свойство 'setAttribute' неопределенного в HTMLTableRowElement"

1 голос
/ 22 февраля 2020

Я сейчас работаю над расширением Chrome. Я пытаюсь сделать так, чтобы, если вы наводите курсор на элемент, фон становится светлее, а когда вы покидаете его, он возвращается. 

if(window.location.pathname == "/page.aspx") {
    tr = document.getElementsByTagName('tr');
    for(i = 0; i < tr.length; i++) {
        tr[i].addEventListener('mouseover', function() {
            tr[i].setAttribute('style', 'background-color: #A9A9A9')
        });
        tr[i].addEventListener('mouseleave', function() {
            tr[i].setAttribute('style', 'background-color: #808080')
        });
    };
};

Вместо этого он ничего не делает, и когда я проверяю консоль, Я получаю двенадцать сообщений об ошибке «Uncaught TypeError: Невозможно прочитать свойство 'setAttribute' undefined в HTMLTableRowElement", все для строк 5 и 8. Что вызывает эти ошибки?

EDIT Мне нужно используйте setAttribute () для переопределения текущего CSS, что делает невозможным использование tr [i] .style.backgroundColor

1 Ответ

0 голосов
/ 22 февраля 2020

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

tr = document.getElementsByTagName('tr');
for(i = 0; i < tr.length; i++) {
  tr[i].addEventListener('mouseover', function() {
    this.setAttribute('style', 'background-color: #A9A9A9')
  });
  tr[i].addEventListener('mouseleave', function() {
    this.setAttribute('style', 'background-color: #808080')
  });
};
<table>
  <tr><td>Hi</td></tr>
  <tr><td>There</td></tr>
</table>
...