Javascript 如何将无序列表或有序列表的选定值存储到变量中?
假设我有一个无序的列表:Javascript 如何将无序列表或有序列表的选定值存储到变量中?,javascript,Javascript,假设我有一个无序的列表: <ul id="list"> <li>Option1</li> <li>Option2</li> <li>Option3</li> <li>Option4</li> <li>Option5</li> <li>Option6</li> </ul> 因此,每当用户选择或单击任何列表项时,它都应该将所选值存储
<ul id="list">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
<li>Option5</li>
<li>Option6</li>
</ul>
因此,每当用户选择或单击任何列表项时,它都应该将所选值存储在x变量中
用普通JavaScript寻找答案
多谢各位
使用getElementsByTagName函数捕获所有元素
使用forEach函数在每个li元素上绑定一个click事件。
若用户单击指定的li元素,则记录其innerHTML值
var elems=document.getElementsByTagName'li';
选择var;
Array.fromelems.forEachv=>v.addEventListener'click',函数{
selected=this.innerHTML;
console.logselected;
};
选择1
选择2
选择3
选择4
选择5
选择6
var x;
document.getElementByIdlist.addEventListenerclick,函数{
ifa.target&&a.target.nodeName==LI{
x=a.target.innerHTML;
document.getElementByIddemo.innerHTML=x;
}
};
选择1
选择2
选择3
选择4
选择5
选择6
到目前为止,您尝试了什么?这听起来更像我正在寻找的,但是当我尝试显示用户从列表中选择的内容时,没有显示任何内容。我在脚本和.innerHTML=x中添加了段落标记ID@Gokkull你能解释一下为什么我写的是同一行,但函数之外的代码不起作用吗?代码工作得非常完美:@gokkulth代码不是这样工作的,因为函数附加到click事件。在注册click事件之前,整个代码由JS引擎执行。因此,数组元素最初将设置为未定义。只有在注册click事件后,才会使用值填充数组。这就是为什么在函数外部调用数组时,它将无法工作,因为它没有值。这实际上显示在控制台日志中,但如何将所选内容存储到变量中,以便在页面的不同部分显示该内容@君主user@AbdullahOmran只需创建一个变量并将其存储在内部:选中编辑。您能解释一下为什么我在函数外部调用该变量时不会显示存储在其中的内容吗?代码工作得很好@君主user@AbdullahOmran如果将var selected放入forEach函数体中,它仍然可以工作,因为整个逻辑都存储在其中。让我看看你到底是什么意思。这正是我的意思