网站开发 · 2024年12月3日

点击获取当前 td 元素内容,为什么 event.srcElement.innerText 获取不到值?

点击获取当前 td 元素内容,为什么 event.srcElement.innerText 获取不到值?

从现在开始,我们要努力学习啦!今天我给大家带来《点击获取当前 td 元素内容,为什么 event.srcElement.innerText 获取不到值?》,感兴趣的朋友请继续看下去吧!下文中的内容我们主要会涉及到等等知识点,如果在阅读本文过程中有遇到不清楚的地方,欢迎留言呀!我们一起讨论,一起学习!

点击获取当前 td 元素内容,为什么 event.srcElement.innerText 获取不到值?插图

点击获取当前 td 元素内容

在使用表格来构建计算器时,想要通过点击表格中的单元格来获取其内部文本内容,但是遇到了问题。代码如下:

<table id="calcuater" onclick="calculater()">
  <!-- ... -->
  <td class="numberkey">1</td>
  <!-- ... -->
</table>

<script>
  function calculater(event) {
    const value =  event.srcelement.innertext; // 获取不到 td 内容
    console.log(value);
  }
</script>

根据你的描述,event.srcelement.innertext 获取不到 td 元素的内容。这是因为 srcelement 属性已被弃用,并且在现代浏览器中不可用。正确的获取元素内容的方法是:

const value = event.target.innertext;

修改后的代码如下:

function calculater(event) {
  const value = event.target.innerText;
  console.log(value);
}

通过使用正确的属性,现在可以成功获取 td 元素的内容,并且在控制台中打印出来。

到这里,我们也就讲完了《点击获取当前 td 元素内容,为什么 event.srcElement.innerText 获取不到值?》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注米云公众号,带你了解更多关于的知识点!

JavaScript 中 onclick=_dopostback() 会导致代码无法运行?如何解决?