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>
- 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
3 Answers
Reset to default 4You 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. reducethe results to a single string by concatenating all the elements'innerHTMLproperties.
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.