javascript - 只是试图访问 a 元素中的值

Question

我有多个a elements，它们是由 for 循环在页面视图上生成的，当它们被单击时，将它们发送ajax post到数据库，以通过其 id 标记数据库中的项目，这等于a element但我的值代码不起作用，有人知道为什么吗？谢谢。

<a href='#' value='(loaded from database)' id='markAsRead'>

var element = document.getElementById('markAsRead');

element.addEventListener('click', function() {
   alert(this.value);
});

Answer 1

锚没有像输入那样的值，你应该使用数据属性

<a href='#' data-value='(loaded from database)' id='markAsRead'>

var element = document.getElementById('markAsRead');

element.addEventListener('click', function() {
 alert(this.getAttribute("data-value"));
});

Answer 2

该id属性必须是唯一的。

如果您想拥有一组具有相同标识符的控件，您可以使用该name属性。

如果您查看 dom 操作的函数：

• document.getElementById()- 元素（单数）
• document.getElementsByName()- 元素（复数）

添加唯一（视情况而定）id 的示例

for (var index = 0; index < 10; index++) {
    var element = document.createElement("a");
    element.setAttribute("data-value", "your value");
    element.setAttribute("id", "markAsRead_" + index);
    element.addEventListener('click', function() {
        alert(this.getAttribute("data-value"));
    });
    document.getElementsByTagName("body")[0].appendChild(element);
}