Заменить onclick на addEventListener

17 августа 2021, 02:20

Как заменить onclick на addEventListener так, чтобы остались те же свойства? То есть после нажатия на <button id="delete">Delete</button> при нажатии на элементы списка будет выводится не cat, а dog.

let li = document.getElementsByTagName('li'); 
    let butt = document.getElementById('delete'); 
 
    Array.from(li, function (item) { 
        item.onclick = function () { 
            item.innerHTML = 'cats' 
        } 
    }); 
 
    butt.addEventListener('click', function () { 
        Array.from(li, function (item) { 
            item.onclick = function () { 
                item.innerHTML = 'dogs' 
            } 
        }); 
    });

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 
<button id="delete">Delete</button>

Answer 1

let li = document.getElementsByTagName('li'); 
let butt = document.getElementById('delete'); 
 
const innerCat = event => event.toElement.innerHTML = 'cat'; 
const innerDog = event => event.toElement.innerHTML = 'dog'; 
 
 
for(let i = 0; i < li.length; i++) { 
  li[i].addEventListener('click', innerCat); 
} 
 
butt.addEventListener('click', function() { 
  for(let i = 0; i < li.length; i++) { 
    li[i].removeEventListener('click', innerCat); 
    li[i].addEventListener('click', innerDog); 
  } 
});

<ul> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
</ul> 
<button id="delete">Delete</button>

P.S. Я бы отметил этот вопрос как дубликат, но на прошлый вопрос вам ответили не совсем корректно.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Tampermonkey подключить локальный js файл

// @require file://C:/jsjs

181

CSS

Автоматический механический клик по button при входе на страницу

Как можно реализовать автоматический механический клик по button id="winterfell" при входе на страницу?Механический,в том смысле,чтобы после входа...

c++

Insert and Remove Arrays elements

Нужно дополнить 2 функции инсерт и ремов , Программа будет работать так создавать массивы с местами степени 2 и заполнять его , пример в картинке

164

c++

Документация msdn winapi с++

К примеру вот ссылка к документации Button в нем есть такое поле как макросы, у меня вопрос как с ними работать?

254