如何使用JavaScript计算所有li元素

Question

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

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

这是列表现在我想迭代它，以便在控制台上我得到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>

Answer 1

您可以使用document.querySelector和textContent来获取将成为字符串的文本，然后使用eval来计算它。

 let m = [...document.querySelector("#add").children]; let val = ''; m.forEach(function(item) { val += item.textContent; }) console.log(eval(val)) //34*5+3

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

Answer 2

你可以使用forEach()迭代li的：

 var satatement = ''; document.querySelectorAll('#add li').forEach(function(item) { satatement += item.textContent.trim(); }); console.log(satatement, '=', eval(satatement));

 li { list-style-type: none; display: inline; }

 <div id="user-input"> <ul id="add"> <li>3</li> <li>4</li> <li>*</li> <li>5</li> <li>+</li> <li>3</li> </ul> </div>

Answer 3

let text = document.querySelectorAll('#add li').reduce((text, el) => text + el.innerHTML);

使用document.querySelectorAll('#add li')获取列表项。
通过连接所有元素的innerHTML属性将结果reduce为单个字符串。

当然你也可以使用列表的textContent ，其中包括

节点及其后代的文本内容

document.querySelector('#add').textContent ，但是包含每个li之间的换行符。

如何使用JavaScript计算所有li元素

问题描述

3 个解决方案

解决方案1
4 2018-09-10 14:26:47

解决方案2
2 2018-09-10 14:28:56

解决方案3
1 2018-09-10 14:46:55

如何使用JavaScript计算所有li元素

问题描述

3 个解决方案

解决方案1 4 2018-09-10 14:26:47

解决方案2 2 2018-09-10 14:28:56

解决方案3 1 2018-09-10 14:46:55

解决方案1
4 2018-09-10 14:26:47

解决方案2
2 2018-09-10 14:28:56

解决方案3
1 2018-09-10 14:46:55