如何使用JavaScript获取要计算的所有li元素_Javascript_Html

如何使用JavaScript获取要计算的所有li元素

javascript html

如何使用JavaScript获取要计算的所有li元素,javascript,html,Javascript,Html,此列表是使用输入标记生成的，并将元素附加到ul： <ul id ="add"> <li>3</li> <li>4</li> <li>*</li> <li>5<li> <li>+<li> <li>3</li> <ul> 三, 四, * 5 + 三, 这是一个列表，现在我想对它进

此列表是使用输入标记生成的，并将元素附加到ul：

<ul id ="add">
    <li>3</li>
    <li>4</li>
    <li>*</li>
    <li>5<li>
    <li>+<li>
    <li>3</li>
<ul>


三,
四,
*
5

+

三,

这是一个列表，现在我想对它进行迭代，以便在控制台上获得34*5+3，它可以使用JavaScript进行计算，但是如何将所有Li的值标记在一起，以便能够计算：

我想从完整的代码中进行计算：

<!DOCTYPE html>
<html>
    <head>
        <title>solve</title>
       <script>
        document.addEventListener('DOMContentLoaded',()=>{
            document.querySelector('#submit').onclick =()=>{
                const li = document.createElement('li');
                li.innerHTML = document.querySelector('#number').value;
                document.querySelector('#add').append(li);
                return false;
            };
        });
       </script>

       <style>
           li{
               list-style-type: none;
               display: inline;

           }
       </style>
    </head>
    <body>

        <div id="user-input">
            <ul id="add">

            </ul>
        </div>
        <div>
           <form>
                <input type="text" id="number">
                <input type="submit" id="submit">
           </form>

        </div>
    </body>
</html>


解决
document.addEventListener（'DOMContentLoaded'，（）=>{
document.querySelector（“#submit”）.onclick=（）=>{
const li=document.createElement（'li'）；
li.innerHTML=document.querySelector（'#number'）.value；
document.querySelector（'#add'）.append（li）；
返回false；
};
});
李{
列表样式类型：无；
显示：内联；
}

您可以使用

document.querySelector

和

textContent

获取将成为字符串的文本，然后使用

eval

进行计算

让m=[…document.querySelector（“#add”）.children]；
让val=''；
m、 forEach（功能（项目）{
val+=item.textContent；
})
console.log（eval（val））//34*5+3


三,
四,
*
五,
+
三,

您可以使用

forEach（）

对li进行迭代：

var satatement=''；
document.querySelectorAll（'#add li'）.forEach（函数（项）{
satatement+=item.textContent.trim（）；
});
log（satatement，'='，eval（satatement））
li{
列表样式类型：无；
显示：内联；
}


三,
四,
*
五,
+
三,



使用document.querySelectorAll（'#add li'）
获取列表项
通过连接所有元素的innerHTML
properties，将结果转换为单个字符串


当然，您也可以使用列表的
节点及其子节点的文本内容
document.querySelector（“#add”）.textContent
，但这将包括每个li
之间的换行符可能重复的var结果=”；document.querySelectorAll（'#add li'）.forEach（（ele）=>result+=ele.textContent.trim（））；很高兴我能帮上忙，如果答案是你想要的，那就把它作为未来读者的首选。
let text = document.querySelectorAll('#add li').reduce((text, el) => text + el.innerHTML);