如何在Modal中显示点击按钮名称？遇$未定义错误求助

问题原因 #

• $ is not defined错误是因为代码中使用了jQuery的$语法，若jQuery未正确加载或加载顺序异常就会触发该报错。
• 按钮同时通过HTML属性onclick和JS循环绑定点击事件，存在逻辑冲突。
• 目标元素选择器错误：HTML中不存在.modal-body类，导致无法找到要修改的<p>元素。

解决方案（不依赖jQuery、不设置按钮id） #

改用原生JavaScript实现需求，修改如下：

1. 修正JavaScript代码 #

// 获取模态框
var modal = document.getElementsByClassName("myModal")[0];
// 获取模态框内用于显示文本的p元素
var modalText = modal.querySelector(".modal-content p");
// 获取关闭按钮
var span = document.getElementsByClassName("close")[0];

// 为所有按钮绑定点击事件
document.querySelectorAll(".myBtn").forEach(btn => {
  btn.addEventListener("click", function() {
    // 将按钮文本赋值给模态框内的p元素
    modalText.textContent = this.innerText;
    // 显示模态框
    modal.style.display = "block";
  });
});

// 点击关闭按钮隐藏模态框
span.addEventListener("click", function() {
  modal.style.display = "none";
});

// 点击模态框外部区域隐藏模态框
window.addEventListener("click", function(event) {
  if (event.target === modal) {
    modal.style.display = "none";
  }
});

// 弹窗关闭函数
function closePopup() {
  modal.style.display = "none";
}

2. 修正HTML代码（移除重复绑定的onclick属性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="myBtn errormodalbutton">Open Modal 1</button>
<hr>
<button class="myBtn errormodalbutton">Open Modal 2</button>
<hr>
<button class="myBtn errormodalbutton">Open Modal 3</button>
<hr>
<button class="myBtn errormodalbutton">Open Modal 4</button>

<div class="myModal modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3 style="text-align:center">Test</h3>
    <p></p>
    <div class="close-button">
      <button type="button" class="right" onclick="closePopup()">Close</button>
    </div>
  </div>
</div>

修改说明 #

• 移除了HTML按钮上的onclick="showValue(this)"，改用addEventListener统一绑定事件，避免逻辑冲突。
• 使用原生querySelector获取模态框内的<p>元素，替换jQuery的$选择器，彻底解决$ is not defined错误。
• 用this.innerText直接获取当前点击按钮的文本内容，无需额外传参。
• 修正了<h3>的样式语法错误：将text-align=center改为text-align:center。

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