logo标签列表

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

javascripthtml
4
使用输入标签生成此列表，并将元素添加到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>
可能是如何在Javascript中获取列表项的值/文本的重复问题。 - Calvin Nunes
var result = '';document.querySelectorAll('#add li').forEach((ele)=> result += ele.textContent.trim());将选择器为'#add li'的所有元素的'textContent'属性去除空格后相加，赋值给'result'变量。 - gaetanoM
3个回答
4
你可以使用 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>

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>

很高兴能够帮助，如果答案符合您的需求，请将其标记为**正确答案**，以便未来的读者参考。 - Zakaria Acharki
1
let text = document.querySelectorAll('#add li').reduce((text, el) => text + el.innerHTML);

使用document.querySelectorAll('#add li')获取列表项。 reduce结果，通过连接所有元素的innerHTML属性成为单个字符串。
当然，您也可以使用列表的textContent，它包括节点及其后代的文本内容。但是，这将在每个li之间包含换行符。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接