如何在下拉菜单点击时内联声明JavaScript变量并在页面其他位置展示？

当然可以实现你的需求，但内联声明变量的方式并不推荐，咱们一步步拆解你的问题：

1. 能不能内联声明变量并展示内容？ #

可以直接在下拉项的onclick事件里内联写代码实现，比如给你的<a>标签加上点击逻辑：

<div class="dropdown">
  <button class="dropbtn">Blood Type</button>
  <div class="dropdown-content">
    <a href="#" onclick="var blood = 'A+'; document.getElementById('feedback').textContent = `你选择的血型是：${blood}`;">A+</a>
    <a href="#" onclick="var blood = 'A-'; document.getElementById('feedback').textContent = `你选择的血型是：${blood}`;">A-</a>
  </div>
</div>
<!-- 页面底部的反馈区域 -->
<div id="feedback"></div>

点击选项时，会在onclick的作用域里声明blood变量，然后把内容插入到页面底部的feedback元素里。但这里要注意：内联声明的var变量会被提升到全局作用域（挂载到window对象上），很容易造成全局变量污染，和其他代码冲突。

2. 变量应该声明在何处？ #

如果一定要用内联方式：

• 用var的话，变量会成为全局变量（非常不推荐）
• 改用let或const的话，变量会被限制在onclick事件处理函数的局部作用域里，不会污染全局

但更合理的做法是把变量放在独立JS代码的局部作用域或模块作用域，彻底避免和HTML耦合。

3. 更优实现方案 #

推荐把JS逻辑和HTML结构分离，这种方式更易维护、可读性更强，也符合现代前端的编码规范。具体实现如下：

完整代码示例 #

HTML部分

<div class="dropdown">
  <button class="dropbtn">Blood Type</button>
  <div class="dropdown-content">
    <!-- 用自定义属性存储血型值，避免硬编码 -->
    <a href="#" data-blood="A+">A+</a>
    <a href="#" data-blood="A-">A-</a>
    <a href="#" data-blood="B+">B+</a>
    <a href="#" data-blood="B-">B-</a>
  </div>
</div>
<!-- 页面底部的反馈区域 -->
<div id="feedback"></div>

CSS部分（简单美化下拉菜单）

.dropdown {
  position: relative;
  display: inline-block;
}
.dropbtn {
  padding: 8px 16px;
  background: #f1f1f1;
  border: none;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ccc;}
#feedback {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

JS部分（独立交互逻辑）

// 获取所有下拉选项和反馈元素
const bloodOptions = document.querySelectorAll('.dropdown-content a');
const feedbackEl = document.getElementById('feedback');

// 批量绑定点击事件
bloodOptions.forEach(option => {
  option.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    // 从自定义属性中获取血型值，变量在局部作用域内，不会污染全局
    const blood = this.dataset.blood;
    // 更新底部反馈内容
    feedbackEl.textContent = `你选择的血型是：${blood}`;
  });
});

这个方案的核心优势：

• 逻辑与结构分离，HTML只负责展示，JS专注处理交互，代码更清晰
• 变量blood被限制在点击事件的局部作用域里，完全避免全局污染
• 通过data-*属性存储数据，新增选项时无需修改JS代码，扩展性更强
• 事件批量绑定，减少重复代码，后期维护更轻松

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