如何使用JavaScript获取要计算的所有li元素
如何使用JavaScript获取要计算的所有li元素
提问于 2018-09-10 22:21:13
这个列表是使用input标签生成的，并将元素附加到ul：
<ul id ="add">
<li>3</li>
<li>4</li>
<li>*</li>
<li>5<li>
<li>+<li>
<li>3</li>
<ul>这是list，现在我想迭代它，以便在控制台上获得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>回答 2
Stack Overflow用户
发布于 2018-09-10 22:26:47
您可以使用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>
Stack Overflow用户
发布于 2018-09-10 22:28:56
您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52259902
复制相关文章
相似问题