admin管理员组

文章数量:1394140

This list was generated using input tag and appending the element to ul :

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

This is list now I would like to iterate over it so that on the console I get 34*5+3 which can calculate using JavaScript, but how to get the value of all Li to tag together so that it is able to calculate:

The plete code is from which I would like to do the calculation :

<!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>

This list was generated using input tag and appending the element to ul :

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

This is list now I would like to iterate over it so that on the console I get 34*5+3 which can calculate using JavaScript, but how to get the value of all Li to tag together so that it is able to calculate:

The plete code is from which I would like to do the calculation :

<!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
  • html
Share Improve this question edited Sep 10, 2018 at 14:52 Zakaria Acharki 67.5k15 gold badges78 silver badges106 bronze badges asked Sep 10, 2018 at 14:21 green seekgreen seek 1333 silver badges11 bronze badges 2
  • Possible duplicate of How to get Value / Text of a List item Javascript – Calvin Nunes Commented Sep 10, 2018 at 14:24
  • var result = '';document.querySelectorAll('#add li').forEach((ele)=> result += ele.textContent.trim()); – gaetanoM Commented Sep 10, 2018 at 14:26
Add a ment  | 

3 Answers 3

Reset to default 4

You can use document.querySelector and textContent to get the text which will be a string then use eval to calculate it.

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>

You could iterate over the li's using forEach():

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>

let text = document.querySelectorAll('#add li').reduce((text, el) => text + el.innerHTML);
  • Use document.querySelectorAll('#add li') to get the list items.
  • reduce the results to a single string by concatenating all the elements' innerHTML properties.

Of course you could also use the textContent of the list, which includes

the text content of a node and its descendants

document.querySelector('#add').textContent, but that would include newlines between each li.

本文标签： htmlHow to get all li element to calculate using JavaScriptStack Overflow

版权声明：本文标题：html - How to get all li element to calculate using JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744653147a2617807.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。