将 <a></a> 标签的内部文本作为参数发送到 javascript 函数

Question

我想将一对之间的文本作为参数发送到 javascript 函数。

我正在尝试这个：

<a href="javascript: insertTag(this.innerHTML);">cats</a>

函数 insertTag() 被调用，但是当我在 insertTag() 函数中访问它时发送的参数看起来是 "undefined"。

我做错了什么以及如何将标签之间的内容作为我的 "insertTag" 函数的参数发送（例如，上面示例中的 "cats"？

分配一个 id 然后使用 GetElementById(id).innerhtml 可行，但我觉得可能有更简单的方法，而不必为调用该函数的每一对分配 "ids"。

非常感谢您的帮助。

Answer 1

与 onclick、onchange 和任何其他 on 属性的工作方式相反，与 javascript: 一起使用的 href 属性不会设置 this 到定义属性的 HTML 元素。所以它将被设置为全局对象 window，它没有 innerHTML 属性.

要使您的用例有效，请执行以下操作：

<a href="javascript: null" onclick="insertTag(this.innerHTML);">cats</a>

现在 href 属性没有定义特定的操作（null 什么都不做），但仍然存在以使 a 元素呈现为超链接。实际操作现在在 onclick 属性中处理，其中 this 将是您所期望的。

备注

大多数人认为在单独的 JavaScript 代码中定义点击处理程序是更好的做法，如下所示：

document.querySelector('#mylink').addEventListener("click", function () {
    insertTag(this.innerHTML);
});

你的元素将是：

<a href="javascript: null" id="mylink">cats</a>

这样做的好处是在加载脚本时解析点击处理程序代码，而不是在用户点击时解析。因此任何语法错误都会立即报告。

Answer 2

主要问题是您正在使用 JavaScript 与 HTML 内联，并且 this 没有像您期望的那样绑定到超链接。

相反，separate your JavaScript from your HTML 并像这样设置您的事件处理程序：

document.querySelector("a").addEventListener("click", function() {
  // Don't use .innerHTML when there is no HTML
  // Use .textContent instead
  test(this.textContent);
});

function test(content){
  console.log(content);
}

<a href="#">cats</a>

但是，更好的是，不要使用超链接作为 JavaScript 的触发器。几乎任何可见的（和一些不可见的）元素都可以被点击并触发 click 事件。超链接用于导航，如果超链接用于其他目的，依赖屏幕阅读器的人将会遇到问题。相反，应该使用另一个内联元素，例如 span：

document.querySelector("span").addEventListener("click", function() {
  // Don't use .innerHTML when there is no HTML
  // Use .textContent instead
  test(this.textContent);
});

function test(content){
  console.log(content);
}

<span>cats</span>

将 <a></a> 标签的内部文本作为参数发送到 javascript 函数

Sending inner text of <a></a> tags as a parameter to a javascript function

javascript

this

innerhtml

备注