Question

当点击此dropdown的元素时，有没有办法在JavaScript中声明变量，以便在页面的其他位置显示？

示例：

var blood = 'A';

这需要去哪里？或者有更好的方法吗？

选择结果将显示在页面末尾作为回复反馈。

HTML

<div class="dropdown">
 <button class="dropbtn">Blood Type</button>
    <div class="dropdown-content">
   <a href="#">A+</a>
   <a href="#">A-</a>
   <a href="#">B+</a>
   <a href="#">B-</a>
   <a href="#">B+</a>
   <a href="#">AB+</a>
   <a href="#">AB-</a>
   <a href="#">0+</a>
   <a href="#">0-</a>
   </div>
 </div>

Answer 1

向容器添加一个事件监听器，用于检查点击的a文本：

const results = document.querySelector('#results');
document.querySelector('.dropdown-content').addEventListener('click', (e) => {
  const a = event.target;
  if (a.tagName !== 'A') return;
  const bloodTypeSelected = a.textContent;
  results.textContent = 'You chose: ' + bloodTypeSelected;
});

<div class="dropdown">
  <button class="dropbtn">Blood Type</button>
  <div class="dropdown-content">
    <a href="#">A+</a>
    <a href="#">A-</a>
    <a href="#">B+</a>
    <a href="#">B-</a>
    <a href="#">B+</a>
    <a href="#">AB+</a>
    <a href="#">AB-</a>
    <a href="#">0+</a>
    <a href="#">0-</a>
  </div>
</div>
<div id="results"></div>

不要尝试内联 - 内联事件处理程序在HTML标记中基本上是eval - 它们是不好的做法，导致代码性能差，难以管理的代码。请认真考虑使用JavaScript附加事件。

在下拉列表中内联javascript变量，以便在其他地方使用

HTML

1 个答案: