JavaScript onclick事件无法获取<a>标签的value属性问题排查

你遇到的问题核心在于**<a>标签并没有原生的value属性**，虽然你在HTML里手动添加了这个属性，但DOM元素不会将其识别为标准属性，所以用e.value自然拿不到值；而你看到的“打印出标签的原始HTML”，其实是浏览器控制台对DOM元素对象的格式化展示，并非真正的原始字符串。

具体的修复方案有三种，按推荐程度排序： #

1. 使用HTML5标准的data-*属性（最推荐）

修改你的Django模板代码，把value换成data-value：

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  {% for type in types %}
    <li>
      <a data-value="{{ type.name }}" onclick="addType(this)" >{{ type.name }}</a>
    </li>
  {% endfor %}
</ul>

然后在JS函数里通过dataset获取值：

function addType(e) {
  console.log(e); // 现在打印的是DOM元素对象，展开能看到data-value属性
  console.log(e.dataset.value); // 正确输出type.name的值
}

2. 直接获取标签的文本内容

既然你已经把{{ type.name }}作为<a>的文本内容展示，完全可以直接读取文本：

function addType(e) {
  console.log(e.textContent.trim()); // trim()去掉可能的空格
}

这种方案不需要修改HTML模板，适合文本内容和需要的值完全一致的场景。

3. 通过getAttribute读取自定义属性（不推荐）

如果不想修改HTML，也可以用DOM的getAttribute方法读取自定义的value属性：

function addType(e) {
  console.log(e.getAttribute('value'));
}

但这种方式因为使用了非标准属性，可能会导致HTML校验不通过，也不符合最佳实践，所以只建议临时应急使用。

内容的提问来源于stack exchange，提问作者Jasper