如何用JavaScript获取Span标签文本并弹窗？解决返回undefined问题

核心问题 #

你的代码存在两个关键问题导致返回undefined：

1. HTML中使用重复ID：两个<span>都设置了id="nameof"，两个按钮都用了id="btn"。ID在DOM中必须唯一，getElementById只会返回第一个匹配的元素，点击第二个卡片按钮时无法正确获取对应名字，甚至可能返回null，访问textContent就会得到undefined。
2. 事件逻辑无法定位当前卡片：原函数通过全局ID查找元素，无法区分点击的是哪个卡片的按钮，无法关联到对应卡片内的名字元素。

修复方案 #

1. 修改HTML结构（移除重复ID，保留类名） #

去掉重复的id属性，用类名标识同类元素：

<div class="swiper-slide card">
  <div class="card-content">
    <div class="image">
      <img src="images/Bake.jpeg" alt="">
    </div>

    <div class="media-icons">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-github"></i>
    </div>

    <div class="name-profession">
      <span class="name">Lukas</span>
      <span class="profession">Back-End Developer</span>
    </div>

    <div class="rating">
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>

    <div class="button">
      <button class="aboutMe" onclick="SayName(event)">About Me</button>
      <button class="hireMe">Hire Me</button>
    </div>
  </div>
</div>

<div class="swiper-slide card">
  <div class="card-content">
    <div class="image">
      <img src="images/Tare.jpeg" alt="">
    </div>

    <div class="media-icons">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-github"></i>
    </div>

    <div class="name-profession">
      <span class="name">Tarik Kadric</span>
      <span class="profession">Front-End Developer</span>
    </div>

    <div class="rating">
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>

    <div class="button">
      <button class="aboutMe" onclick="SayName(event)">About Me</button>
      <button class="hireMe">Hire Me</button>
    </div>
  </div>
</div>

2. 修改JavaScript函数（定位当前卡片的名字元素） #

通过点击事件的目标元素，向上找到当前卡片容器，再查找容器内的名字元素：

function SayName(event) {
  // 从点击的按钮向上查找最近的.card容器
  const card = event.target.closest('.card');
  // 在卡片内查找.name类的元素
  const nameElement = card.querySelector('.name');
  // 获取文本内容并弹窗
  alert(nameElement.textContent);
}

额外说明 #

• closest('.card')方法从当前元素开始向上遍历DOM树，找到第一个匹配.card选择器的父元素，确保定位到点击按钮所在的卡片。
• querySelector('.name')在卡片容器内精准查找名字元素，避免全局查找的歧义。

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