Question

假设我有一个无序列表：

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

因此，无论何时选择任何列表项或只是用户点击它，它都应该将所选值存储在x变量中。

使用纯JavaScript寻找答案。

谢谢

Answer 1

＆＃13;

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;
        }
    });

＆＃13;

<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>

＆＃13;

Answer 2

使用getElementsByTagName函数
使用forEach函数在每个click元素上绑定li个事件。
如果用户点击指定的li元素，请记录innerHTML值

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: