javascript - when i am updating my list then its not getting updated in the backend the count of list is still the same why?
问题描述
I am trying to update a list, but when I add a new element and then count the no. of the element in that list it is still the same as the previous value
here is the code
I am trying to update the section name in the file by clicking on the list its working fine when I don't add any new section, but as I add a new section the eventListener on li stop working.
<!DOCTYPE html>
<html>
<head>
<title>sections</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="sidebar col col-lg-3">
<center><h3>Sections</h3></center><hr>
<ul class="list">
<li>K19SP</li>
<hr>
<li>K19PV</li>
<hr>
<li>K19MA</li>
<hr>
<li>K19RQ</li>
<hr>
<li>K19MS</li>
<hr>
<li>K19LS</li>
<hr >
<li>K19DQ</li>
<hr>
<li>K19MR</li>
<hr>
<li>K19OH</li>
<hr>
</ul>
</div>
<div class="col col-lg-9">
<center><h3 id='head'></h3></center>
<div class="sidebar-right col col-lg-3">
<button class="btns">Add Student</button>
<button class="btns">Remove Student</button>
<button class="btns">Upload Assignment</button>
<button class="btns">View Status</button>
<button class="btns"> Upload Reading Material</button>
<button class="btns">Remove Section</button>
</div>
</div>
</div>
<div class="row">
<div class="col col-lg-3">
<input type="text" name="sect" id="sect">
<button type="button" id="add" onclick="getInput()">ADD</button>
</div>
</div>
</div>
<script type="text/javascript" src="app.js">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
this is javascript
var ul = document.querySelector('ul');
var input = document.getElementById('sect');
var head = document.querySelector('#head');
function getInput() {
ul.innerHTML = ul.innerHTML + "<li>"+input.value+"</li> <hr>";
}
var li = document.querySelectorAll('li');
var total = document.querySelectorAll('li').length;
for(let i=0 ; i< total ; i++)
{
li[i].addEventListener('click',() => { head.innerHTML = li[i].innerHTML});
}
解决方案
Replace your script with below code. Each time you add a new item , you need add the listener to that li
.
UpdateListener()
will do that for you.
<script>
var ul = document.querySelector('ul');
var input = document.getElementById('sect');
var head = document.querySelector('#head');
function getInput() {
ul.innerHTML = ul.innerHTML + "<li>"+input.value+"</li> <hr>";
UpdateListener();
}
function UpdateListener(){
var li = document.querySelectorAll('li');
var total = document.querySelectorAll('li').length;
for(let i=0 ; i< total ; i++)
{
li[i].addEventListener('click',() => {
head.innerHTML = li[i].innerHTML
});
}
}
UpdateListener();
</script>
推荐阅读
- amazon-web-services - 通过 java 创建 AWS Amazon Polly mp3 文件
- azure - 为什么在从 Azure 容器注册表中提取图像之前需要登录到它,即 az login 不够好?
- javascript - 如何解开图表?
- java - 如果条件为真,有什么方法可以中断并重新启动 for 循环?
- javascript - 在 Visual Studio 中使用 Taiko guage 框架有多可靠?
- .net-core - 将 Roslyn 与 dotnet 核心一起使用时,已存在具有相同键但值不同的元素
- python - 订购 SQL 数据库
- json - 如何将更复杂的面向人的文本输出解析为机器友好的风格?
- r - 将txt文件导入R的困难
- ruby - (确保驱动程序支持 W3C WebDriver 规范)。