Блог

Я новичок в Javascript. Я хочу написать код javascript, который при нажатии кнопки выводит окно предупреждения и записывает атрибут data-message. Вот мой код:

 <button type="button" data-message="a1" onclick="pop()">click</button>

<script>
  function pop() {
    alert(this.getAttribute("data-message"));
  }
</script>
 

но я получаю сообщение об ошибке

 TypeError: this.getAttribute is not a function
alert(this.getAttribute("data-message"));
 

У меня есть два вопроса:

1. Что не так?
2. Как я могу это отладить? Как я могу узнать, на что this ссылается? Я использую firebug.

Большое спасибо.

Вам нужно отправить this на кнопку, как

 <button type="button" data-message="a1" onclick="pop(this)">click</button>
 

и Js, фиксируют, кто его вызывает.

 function pop(e) {
    alert(e.getAttribute("data-message"));
  }
 

Рабочая демонстрация

В вашей функции this есть window объект, и у него нет getAttribute метода. Вам нужно передать this в качестве аргумента из onclick атрибута:

 <button type="button" data-message="a1" onclick="pop(this)">click</button>

<script>
  function pop(button) {
    alert(button.getAttribute("data-message"));
  }
</script>
 

Как упоминали другие, вам необходимо передать this свою функцию onclick .

 <button type="button" data-message="a1" onclick="pop(this)">click</button>

function pop(element) {
  alert(element.getAttribute("data-message"));
}
 

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

Или jquery

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function()
{
    $(".message").on("click", function()
    {
        console.log($('.message').data('message'));
    });
});
</script>

<button type="button" class="message" data-message="a1">click</button>
 

Вы можете сделать это также встроенным

<button type="button" data-message="a1" onclick="function pop(this); pop(button);pop(alert(button.getAttribute("data-message"));)">click</button>

DOM фактически предоставляет набор API для доступа к элементам HTML, и этот указатель указывает на область объекта, которая может получить доступ только к атрибутам class, ID, style и т.д.

В области видимости объекта, то есть вы можете получить доступ через атрибуты объекта (this.data-message). Однако в области объекта нет метода getAttribute(), поэтому вы не можете использовать this.getAttribute() .