如何在我的 <a> 标签中返回内部 HTML

How can return the innerHTML inside my <a> tag?

本文关键字：标签 返回 内部 HTML 我的      更新时间：2023-09-26

var checklist = document.getElementById("my-ul");
var items = checklist.querySelectorAll("a");
console.log(checklist);
console.log(items);
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click", returnLetter);
}
function returnLetter() {
  alert(items.innerHTML);
}
<ul id="my-ul" class="pager">
  <li><a href="#">A</a>
  </li>
  <li><a href="#">B</a>
  </li>
  <li><a href="#">C</a>
  </li>
  <li><a href="#">D</a>
  </li>
  <li><a href="#">E</a>
  </li>
  <li><a href="#">F</a>
  </li>
  <li><a href="#">G</a>
  </li>
  <li><a href="#">H</a>
  </li>
  <li><a href="#">I</a>
  </li>
</ul>

我的 javascript 似乎没有返回任何内容，警报打印出"未定义"，但我无法弄清楚我的问题在哪里。我的目标是返回与用户单击的按钮/链接相对应的字母。

您需要

在事件侦听器上使用this。例如，您的代码可以重写为 

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener("click", clickCallback);
}
function clickCallback() {
    alert(this.innerHTML);
}

现在，您的returnLetter()函数正在尝试打印出每个item的innerHTML。若要解决此问题，请仅通过将该项传递给函数来提醒该项的innerHTML，如下所示：

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener("click", alertValue);
}
function alertValue() {
    alert(this.innerHTML);
});

事件处理程序函数中的this将指向正在单击的元素(调用事件处理程序(，而不是指向 items 数组。

请参阅 JSFiddle.net 的工作示例。

它返回undefined .querySelectorAll()返回一个 NodeList，而items是一个 NodeList，这意味着它没有 innerHTML 属性。您需要访问节点列表中元素的属性。

您可以传递单击元素的索引：

这里的例子 

for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click", returnLetter.bind(items[i], i));
}
function returnLetter(i) {
  console.log(items[i].textContent);
}

但是，更好的选择是使用 this 关键字来获取对事件发生的元素的引用。我还建议使用 .textContent 属性：

这里的例子

function returnLetter() {
  console.log(this.textContent);
}

作为旁注，您也可以只将单个事件侦听器附加到父ul元素，然后访问event.target以获取对单击的a元素的引用：

这里的例子

checklist.addEventListener("click", returnLetter);
function returnLetter(e) {
  if (e.target.tagName === 'A') {
    alert(e.target.textContent);
  }
}

您应该使用 this.innerHTML 作为指向单击元素的this。

var checklist = document.getElementById("my-ul");
var items = checklist.querySelectorAll("a");
console.log(checklist);
console.log(items);
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click", returnLetter);
}
function returnLetter() {
  alert(this.innerHTML);
}
<ul id="my-ul" class="pager">
  <li><a href="#">A</a>
  </li>
  <li><a href="#">B</a>
  </li>
  <li><a href="#">C</a>
  </li>
  <li><a href="#">D</a>
  </li>
  <li><a href="#">E</a>
  </li>
  <li><a href="#">F</a>
  </li>
  <li><a href="#">G</a>
  </li>
  <li><a href="#">H</a>
  </li>
  <li><a href="#">I</a>
  </li>
</ul>

相关文章：