如何用JavaScript获取点击段落文本并赋值为可复用变量

你拿不到变量值是三个核心错误导致的：

• 作用域错误：你在点击事件的回调函数里用var topicHeading重新声明了同名变量，这个变量是回调函数内部的局部变量，赋值操作根本不会修改你在循环外声明的全局topicHeading
• 执行时序错误：你写的console.log(topicHeading)是在页面加载、绑定事件的阶段就立刻执行的，这时候用户还没点击任何目录项，变量还没被赋值，自然打印出undefined。就算你修正了作用域问题，这行日志在点击前执行也拿不到正确值
• 额外的时序风险：你给外层.button-section绑定的opendetails()是写在HTML的onclick里的，和你给p标签绑的点击事件是独立触发的，很容易出现模态框已经弹出、变量还没完成赋值的问题

直接调整代码逻辑，去掉内部重复的变量声明，把依赖变量值的操作放到赋值完成后执行：

修正后的JS代码 #

// 全局存储当前选中的目录标题，供后续提交表单时调用
var topicHeading = '';
var topicButtons = document.querySelectorAll('p[class^=topicName]');

for (var i = 0; i < topicButtons.length; i++) {
  topicButtons[i].addEventListener('click', function() {
    // 不要重新声明变量，直接给外层定义的topicHeading赋值
    topicHeading = this.innerHTML.trim();
    // 赋值完成后再调用打开模态框的方法，保证时序正确
    opendetails();
    // 测试：点击后打印就能看到正确的目录值
    console.log('当前选中目录：', topicHeading);
  });
}

// 表单提交逻辑里直接读取全局的topicHeading即可
function handleFormSubmit() {
  const submitData = {
    // 其余表单输入字段按你的需求补充
    topic: topicHeading,
    // otherField: 对应表单输入值
  }
  // 后续走提交接口的逻辑
  console.log('提交数据：', submitData)
}

HTML调整建议 #

把外层.button-section上写的内联onclick="opendetails()"删掉，避免重复触发、时序错乱，修改后的目录结构示例：

<div class="wallet-buttons" id="walletsList">
  <div id="Topic1" class="button-section">
    <i class="active-icon"></i>
    <div class="btn-name">
      <p class="topicName">Topic 1</p>
    </div>
    <div class="btn-img">
      <img src="img/topicimg.svg" alt="Topic Image">
    </div>
  </div>
  <!-- 其余Topic2/Topic3/Topic4节点做相同处理，删掉onclick属性即可 -->
</div>

• 所有需要用到topicHeading值的逻辑，都要在用户点击目录项、完成变量赋值之后再执行，不要在页面初始化阶段就读取这个变量
• 如果需要更严谨的变量管控，也可以把topicHeading挂在模态框的配置对象里，不用污染全局作用域，对新手来说全局变量的方案最容易理解和调试

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