Question

我是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"));

我有两个问题：

出了什么问题？
我该如何调试？我怎样才能找出this所指的内容？我正在使用萤火虫。

非常感谢。

Answer 1

您需要在

按钮上发送this

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

和Js，捕捉谁在呼唤它。

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

Working DEMO

Answer 2

在您的函数中，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>

Answer 3

正如其他人所提到的，你需要在你的onclick函数中传递this。

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

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

为了更好地理解为什么会出现这种情况，this is a good read。该页面详细描述了您的完全方案。

Answer 4

或者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>

Answer 5

您也可以内联

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

Answer 6

DOM 实际上提供了一组 API 来访问HTML元素，并且此指针指向对象的范围，该对象只能访问 类，ID，样式 等属性。

在对象范围内，即，您可以通过对象属性（ this.data-message ）访问。但是，对象范围内没有 getAttribute（） 方法，因此您不能使用 this.getAttribute（）。

this.getAttribute不是一个函数

6 个答案: