Событие onclick на кнопке

226

17 февраля 2018, 23:51

Когда я нажимаю на кнопку, чтобы высвечивался alert с текстом кнопки. У меня такой код, это правильно, или надо по-другому прописать?

document.addEventListener('DOMContentLoaded', function() { 
  let btn = document.getElementById('btn-msg'); 
  btn.onclick = function() { 
    alert('Show message'); 
  } 
  btn.onmouseover = function() { 
    event.target.style.background = 'red'; 
  } 
  btn.onmouseout = function() { 
    event.target.style.background = '' 
  } 
});

<button id="btn-msg">Show message</button> 
<button id="btn-generate">Generate item</button> 
<p><strong id="tag">Tag:</strong></p> 
<ul> 
  <li>Item 1</li> 
  <li>Item 2</li> 
</ul>

Answer 1

В вашем коде присутствует ошибка: необходимо указать обработчикам событий аргумент event там, где это необходимо. Помимо этого, рекомендую выводить текст через this.textContent

document.addEventListener('DOMContentLoaded', function() { 
  let btn = document.getElementById('btn-msg'); 
  btn.onclick = function() { 
    alert(this.textContent); 
  } 
  btn.onmouseover = function(event) { 
    event.target.style.background = 'red'; 
  } 
  btn.onmouseout = function(event) { 
    event.target.style.background = '' 
  } 
});

<button id="btn-msg">Show message</button> 
<button id="btn-generate">Generate item</button> 
<p><strong id="tag">Tag:</strong></p> 
<ul> 
  <li>Item 1</li> 
  <li>Item 2</li> 
</ul>