如何将无序列表或有序列表的选定值存储到变量中

Question

让我有一个无序的列表：

<ul id="list">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
<li>Option5</li>
<li>Option6</li>
</ul>

因此，每当选择的任何列表项或仅由用户单击的任何列表项时，都应将所选值存储在x variable中。

寻求使用普通JavaScript的答案。

谢谢

Answer 1

var x; 
document.getElementById("list").addEventListener("click",function(a) {
        if(a.target && a.target.nodeName == "LI") {
            x = a.target.innerHTML;
            document.getElementById("demo").innerHTML = x;
        }
    });

<ul id="list">
  <li>Option1</li>
  <li>Option2</li>
  <li>Option3</li>
  <li>Option4</li>
  <li>Option5</li>
  <li>Option6</li>
</ul>
<div id="demo"></div>

Answer 2

• 使用getElementsByTagName功能捕获所有元素
• 使用forEach函数在每个li元素上绑定click事件。
• 如果用户单击指定的li元素，请记录它是innerHTML值

var elems = document.getElementsByTagName('li');
var selected;
Array.from(elems).forEach(v => v.addEventListener('click', function(){
  selected = this.innerHTML;
  console.log(selected);
}));

<ul id="list">
  <li>Option1</li>
  <li>Option2</li>
  <li>Option3</li>
  <li>Option4</li>
  <li>Option5</li>
  <li>Option6</li>
</ul>