Question

我正在尝试使用backgroud-color更改按钮的JavaScript。这是我的按钮：

<button type="submit" class="btn btn-primary  btn-responsive btnVotePost" name="Approve" value="Approve" id="btnApprove{{post.postId}}" data-post-id="{{post.postId}}" onclick="approveClicked()">Approuver</button>

我的模板显示除data-post-id属性外具有相同特征的按钮列表。

因此，我的想法是在我的data-post-id函数中获取JavaScript，然后更改按钮的background-color。

Function ApproveClicked(){
    var x = document.getAttribute("data-post-id")//Not working
}

那么如何获得data-post-id的价值？

Answer 1

Javascript是CaSe SeNsItIvE。 Function与function不同。 ApproveClicked也与approveClicked不同。这是从当前元素获取数据的最简单方法：

＆＃13;

function approveClicked(obj) {
    console.log(obj.dataset.postId);

    //You can then get the other element by id (Not recommended, as there are much better solutions, that don't pollute your DOM with id's like 1, 2, 3...):
    //document.getElementById(obj.dataset.postId).style.backgroundColor = 'green';
}

＆＃13;

<button type="submit" class="btn btn-primary  btn-responsive btnVotePost" name="Approve" value="Approve" id="btnApprove{{post.postId}}" data-post-id="testId" onclick="approveClicked(this)">Approuver</button>

＆＃13;

Answer 2

您可以通过以下方式实现目标。你在类型问题上也犯了一些错误，例如你写了Function它应该function，函数名也与你在按钮属性approveClicked中写的不匹配但是在声明中你写了ApproveClicked

<button type="submit" class="btn btn-primary  btn-responsive btnVotePost" name="Approve" value="Approve" id="btnApprove{{post.postId}}" data-post-id="{{post.postId}}" onclick="approveClicked(this)">Approuver</button>

function approveClicked(self){
  var x = self.getAttribute("data-post-id")
}

如何使用javaScript获取特定元素？

2 个答案: