I am new to Javascript. I want to write a javascript code that when I click a button, the alert window pops up and writes data-message attribute. Here is my code:

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

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

but I get the error

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

I have two questions:

1. What is wrong?

2. How can I debug this? How can I find out what this refers to? I am using firebug.

Thanks a lot.

I am new to Javascript. I want to write a javascript code that when I click a button, the alert window pops up and writes data-message attribute. Here is my code:

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

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

but I get the error

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

I have two questions:

1. What is wrong?

2. How can I debug this? How can I find out what this refers to? I am using firebug.

Thanks a lot.

• javascript

6 Answers 6

You need send this on the button like

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

and the Js, capture who is calling it.

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

Working DEMO

In your function, this is the window object, and it has no getAttribute method. You need to pass this as an argument from the onclick attribute:

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

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

As others have mentioned, you need to pass this in your onclick function.

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

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

For a better understanding of why this is the case, this is a good read. That page describes, in great detail, your exact scenario.

Or 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>

You can do it also inline

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

DOM actually provides a set of API to access HTML elements, and this pointer points to the scope of the object, which can only access the attributes class, ID, style, etc.

In the scope of the object, that is, you can access through the object attributes (this.data-message). However, there is no getAttribute() method in the scope of the object, so you cannot use this.getAttribute().