如何从变量中的事件 onClick 中获取价值？

Question

如何从变量中的事件 onClick 中获取价值？

我的 html 中有两个跨度和语言的按钮

<button class="switch" >
<span class='span switch_span spanlg span-dark' id = 'en' data-lang="en">EN </span>
<span class='switch_span1 spanlg'>/</span> 
<span class='span spanlg span-dark' id = 'ru' data-lang="ru" >RU</span>
</button>

我需要在 script.js 中接收变量 onclick id 或 data-lang

我在下面尝试，但它不起作用

const span = document.querySelectorAll('.span');

var postId='';

span.forEach(function(spa) {

    spa.addEventListener('click', function() {
      postId = this.getAttribute('id');
      return postId;
    })
})

console.log(postId)

并且 postId 没有收到 id

我需要在变量中有这个 id

非常感谢您的帮助！

Answer 1

您应该从侦听器 function 的参数中获取目标，例如：

function(event) {
  postId = event.target.id;
}

查看更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Event/target

另请注意，仅在触发事件后才设置变量。

Answer 2

您只是没有在正确的时间或正确的位置调用 console.log

span.forEach(function(spa) {

    spa.addEventListener('click', function() {
      postId = this.getAttribute('id');
      console.log("id: " + postId);
      return postId;
    })
})

//console.log(postId)