如何使用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