如何根据点击元素设置JavaScript的alert内容？及代码返回undefined问题

问题1：如何根据被点击的元素设置alert弹窗内容？ #

有几种简单实用的方法，你可以根据场景选择：

• 直接在事件中使用this：最直观的方式，在元素的onclick属性里直接写逻辑，this会自动指代当前被点击的元素，比如：

  <p id="G1" onclick="alert(this.innerHTML)">Gourc'hemonnoù!</p>
  

• 用事件监听器绑定（推荐）：把HTML和JS代码分离，更利于后续维护。先获取目标元素，再绑定点击事件，此时监听函数里的this会准确指向被点击的元素：

  const targetElement = document.getElementById('G1');
  targetElement.addEventListener('click', function() {
    alert(this.innerHTML);
  });
  

• 箭头函数写法：如果习惯用箭头函数，要注意this的指向变化，这时候可以通过事件对象的target属性获取被点击元素：

  const targetElement = document.getElementById('G1');
  targetElement.addEventListener('click', (event) => {
    alert(event.target.innerHTML);
  });
  

问题2：为什么你的代码返回'undefined'？ #

先看你给出的代码：

function print() { alert(this.innerHTML); } 
<p id="G1" onclick='print()'>Gourc'hemonnoù!</p>

问题出在**this的指向错误**！当你在onclick里直接调用print()时，这个函数是在全局作用域下执行的，浏览器环境中全局作用域的this就是window对象，而window并没有innerHTML属性，所以自然返回undefined。

给你几个快速修复的办法：

• 把元素作为参数传入函数：修改onclick属性，将当前元素传进函数，再在函数里获取内容：

  <p id="G1" onclick='print(this)'>Gourc'hemonnoù!</p>
  <script>
    function print(element) { 
      alert(element.innerHTML); 
    }
  </script>
  

• 改用事件监听器：就像问题1里推荐的方式，这种写法能自动让this指向被点击元素，避免作用域问题。
• 强制绑定this指向：用call()方法把this绑定到当前点击的元素上：

  <p id="G1" onclick='print.call(this)'>Gourc'hemonnoù!</p>
  <script>
    function print() { 
      alert(this.innerHTML); 
    }
  </script>
  

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