Javascript 为什么string.length没有更新？
Javascript 为什么string.length没有更新？,javascript,string-length,nodelist,Javascript,String Length,Nodelist,这是我自己编写的第一段代码。我正在尝试使用一个输入字段将项目添加到列表中，然后如果您按下按钮生成代码，它将收集所有选中的项目并将文本复制到另一个div中
基本上，我的问题围绕两个变量：
const list = listUl.children;
const listCopy = listUl.querySelectorAll('span');
假设列表中有4项。如果我向列表中添加一个新项目，我可以看到列表。长度添加此新项目，它将从4更改为5。
但listCopy.length不会发生这种情况。
这是我自己编写的第一段代码。我正在尝试使用一个输入字段将项目添加到列表中，然后如果您按下按钮生成代码，它将收集所有选中的项目并将文本复制到另一个div中
基本上，我的问题围绕两个变量：
const list = listUl.children;
const listCopy = listUl.querySelectorAll('span');
假设列表中有4项。如果我向列表中添加一个新项目，我可以看到列表。长度添加此新项目，它将从4更改为5。
但listCopy.length不会发生这种情况。该值保持为4
如果lstCopy在列表中，为什么会发生这种情况？
如何更新listCopy
这是我的密码：
常量addItemInput=document.querySelector'.addItemInput'；
const addItemButton=document.querySelector'.addItemButton'；
const copyText=document.querySelector'.generateCode'；
const listUl=document.querySelector'.list'；
const list=listUl.children；
const listCopy=listUl.queryselectoral'span'；
const clonedCode=document.querySelector'.code p'；
//功能：生成值/项=可拖动，复选框，删除按钮
const attachItemListButton=项目=>{
//拖拉的
item.draggable=true；
item.classList.addlist-item；
//复选框
让checkbox=document.createElement'input'；
checkbox.type='checkbox'；
checkbox.className='checkbox'；
checkbox.name=chkboxName1；
checkbox.value=值；
checkbox.id=id；
item.insertBeforecheckbox，item.childNodes[0]| | null；
//移除按钮
让remove=document.createElement'button'；
remove.className='remove'；
remove.textContent='x'；
项目1.2：移除；
};
对于let i=0；i{
让copyTextFromList=；
对于let i=0；i{
让li=document.createElement'li'；
设span=document.createElement'span'；
span.textContent=addItemInput.value；
李斯特；
李。斯潘；
附件列表按钮li；
addItemInput.value=；
};
//功能：移除按钮
addEventListener'click'，事件=>{
如果event.target.tagName==“按钮”{
如果event.target.className=='remove'{
让li=event.target.parentNode；
设ul=li.parentNode；
ul.removeChildli；
}
}
};
/*谷歌字体*/
@导入url'https://fonts.googleapis.com/css?family=Heebo:300,400,700';
/*根*/
：根{
-白色：fff；
-黑色：2D3142；
-彩色-黑色-2:0E1116；
-颜色灰色：CEE5F2；
-颜色-gray-2:ACCBE1；
-颜色-灰色-3:CEE5F2；
-绿色:439775 ;；
-蓝色：4686CC；
}
身体{
字体系列：“Heebo”，无衬线；
字体大小：400；
字体大小：16px；
颜色：黑色；
}
氢{
字号：700；
字体大小：1.5rem；
}
h3{
字号：700；
字体大小：1.25rem；
}
钮扣{
背景：蓝色；
填充物：5px10px；
边界半径：5px；
颜色：白色；
}
[可拖动]{
-moz用户选择：无；
-khtml用户选择：无；
-webkit用户选择：无；
用户选择：无；
-khtml用户拖动：元素；
-webkit用户拖动：元素；
}
保险单{
列表样式类型：无；
填充：0；
最大宽度：300px；
}
.列表按钮{
背景：颜色为黑色；
}
.清单项目{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
宽度：自动；
保证金：5px自动；
填充物：5px；
光标：移动；
背景：颜色为灰色；
边界半径：5px；
}
.list-item.draggingElement{
不透明度：0.4；
}
.list-item.over{
边框顶部：3倍纯色绿色；
}
按钮。移除{
保证金：自动0自动；
}
输入{
保证金：自动5px自动0；
}
.按钮包装{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
最大宽度：300px；
}
.button包装器.addItemInput{
宽度：63%；
边界半径：5px 0 5px；
}
.button包装器.addItemButton{
宽度：35%；
边界半径：0 5px 5px 0；
}
.button包装器.generateCode{
宽度：100%；
背景：绿色；
边缘顶部：5px；
}
.p.代码{
背景：灰色；填充：5px；
边框：1px实心var-color-gray-2；
最小高度：20px；
字体大小：300；
}
标题
英雄
简介
页脚
添加项
生成代码
密码
节点列表有两种变体，活动节点和非活动节点。querySelectorAll返回一个非活动的静态节点列表。children返回一个live，它返回一个HTMLCollection，但您可以忽略这个区别
现在
要使listCopy也处于活动状态，可以使用listUl.getElementsByTagName'span'
要按类选择元素，请使用GetElementsByCassName。据我所知，没有办法使用CSS或XPath获取实时集合，即更复杂的查询。节点列表有两种变体，实时和非实时。querySelectorAll返回一个非活动的静态节点列表。children返回一个live，从技术上讲，它返回一个HTMLCollection，但您现在可以忽略这个区别
要使listCopy也处于活动状态，可以使用listUl.getElementsByTagName'span'
要按类选择元素，请使用GetElementsByCassName。据我所知，没有办法使用CSS或XPath获取实时集合，即更复杂的查询。问题是const listCopy=listUl.queryselectoral'span'；从一开始就使用span数组启动
为了得到更新的列表
const listCopy=listUl.queryselectoral'span'；将让listCopy=listUl.queryselectoral'span'；在你的功能中
//Cloning code if there are checked items
copyText.addEventListener('click', () => {
// add the following line - in this way you will select the span from the updated list
listCopy = listUl.querySelectorAll('span');
let copyTextFromList = "";
for (let i = 0; i < listCopy.length; i += 1) {
if (listCopy[i].parentNode.querySelector("input:checked")) {
copyTextFromList += listCopy[i].textContent + ',';
}
}
clonedCode.innerHTML = copyTextFromList;
});
问题是const listCopy=listUl.queryselectoral'span'；从一开始就使用span数组启动
为了得到更新的列表
const listCopy=listUl.queryselectoral'span'；将让listCopy=listUl.queryselectoral'span'；在你的功能中
//Cloning code if there are checked items
copyText.addEventListener('click', () => {
// add the following line - in this way you will select the span from the updated list
listCopy = listUl.querySelectorAll('span');
let copyTextFromList = "";
for (let i = 0; i < listCopy.length; i += 1) {
if (listCopy[i].parentNode.querySelector("input:checked")) {
copyTextFromList += listCopy[i].textContent + ',';
}
}
clonedCode.innerHTML = copyTextFromList;
});
如果您想使用querySelectorAll，这可能会有所帮助。每次检查长度时，它都会重新计算并返回值。Symbol.iterator可帮助您处理…个循环
常量addItemInput=document.querySelector'.addItemInput'；
const addItemButton=document.querySelector'.addItemButton'；
const copyText=document.querySelector'.generateCode'；
const listUl=document.querySelector'.list'；
const list=listUl.children；
常量列表副本={
获取长度{
返回listUl.queryselectoral'span'.length
},
*[符号.迭代器]{
设i=0；
const l=listUl.queryselectoral'span'；
而我{
//拖拉的
item.draggable=true；
item.classList.addlist-item；
//复选框
让checkbox=document.createElement'input'；
checkbox.type='checkbox'；
checkbox.className='checkbox'；
checkbox.name=chkboxName1；
checkbox.value=值；
checkbox.id=id；
item.insertBeforecheckbox，item.childNodes[0]| | null；
//移除按钮
让remove=document.createElement'button'；
remove.className='remove'；
remove.textContent='x'；
项目1.2：移除；
};
对于let i=0；i{
让copyTextFromList=；
对于listCopy的let项{
如果item.parentNode.querySelectorinput:已选中{
copyTextFromList+=item.textContent+'，'；
}
}
clonedCode.innerHTML=copyTextFromList；
};
//将输入字段中的项目添加到列表中
addItemButton.addEventListener'click'，=>{
让li=document.createElement'li'；
设span=document.createElement'span'；
span.textContent=addItemInput.value；
李斯特；
李。斯潘；
附件列表按钮li；
addItemInput.value=；
};
//功能：移除按钮
addEventListener'click'，事件=>{
如果event.target.tagName==“按钮”{
如果event.target.className=='remove'{
让li=event.target.parentNode；
设ul=li.parentNode；
ul.removeChildli；
}
}
};
/*谷歌字体*/
@导入url'https://fonts.googleapis.com/css?family=Heebo:300,400,700';
/*根*/
：根{
-白色：fff；
-黑色：2D3142；
-彩色-黑色-2:0E1116；
-颜色灰色：CEE5F2；
-颜色-gray-2:ACCBE1；
-颜色-灰色-3:CEE5F2；
-绿色:439775 ;；
-蓝色：4686CC；
}
身体{
字体系列：“Heebo”，无衬线；
字体大小：400；
字体大小：16px；
颜色：黑色；
}
氢{
字号：700；
字体大小：1.5rem；
}
h3{
字号：700；
字体大小：1.25rem；
}
钮扣{
背景：蓝色；
填充物：5px10px；
边界半径：5px；
颜色：白色；
}
[可拖动]{
-moz用户选择：无；
-khtml用户选择：无；
-webkit用户选择：无；
用户选择：无；
-khtml用户拖动：元素；
-webkit用户拖动：元素；
}
保险单{
列表样式类型：无；
填充：0；
最大宽度：300px；
}
.列表按钮{
背景：颜色为黑色；
}
.清单项目{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
宽度：自动；
保证金：5px自动；
填充物：5px；
光标：移动；
背景：var颜色-
灰色
边界半径：5px；
}
.list-item.draggingElement{
不透明度：0.4；
}
.list-item.over{
边框顶部：3倍纯色绿色；
}
按钮。移除{
保证金：自动0自动；
}
输入{
保证金：自动5px自动0；
}
.按钮包装{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
最大宽度：300px；
}
.button包装器.addItemInput{
宽度：63%；
边界半径：5px 0 5px；
}
.button包装器.addItemButton{
宽度：35%；
边界半径：0 5px 5px 0；
}
.button包装器.generateCode{
宽度：100%；
背景：绿色；
边缘顶部：5px；
}
.p.代码{
背景：灰色；填充：5px；
边框：1px实心var-color-gray-2；
最小高度：20px；
字体大小：300；
}
标题
英雄
简介
页脚
添加项
生成代码
密码
如果您想使用querySelectorAll，这可能会有所帮助。每次检查长度时，它都会重新计算并返回值。Symbol.iterator可帮助您处理…个循环
常量addItemInput=document.querySelector'.addItemInput'；
const addItemButton=document.querySelector'.addItemButton'；
const copyText=document.querySelector'.generateCode'；
const listUl=document.querySelector'.list'；
const list=listUl.children；
常量列表副本={
获取长度{
返回listUl.queryselectoral'span'.length
},
*[符号.迭代器]{
设i=0；
const l=listUl.queryselectoral'span'；
而我{
//拖拉的
item.draggable=true；
item.classList.addlist-item；
//复选框
让checkbox=document.createElement'input'；
checkbox.type='checkbox'；
checkbox.className='checkbox'；
checkbox.name=chkboxName1；
checkbox.value=值；
checkbox.id=id；
item.insertBeforecheckbox，item.childNodes[0]| | null；
//移除按钮
让remove=document.createElement'button'；
remove.className='remove'；
remove.textContent='x'；
项目1.2：移除；
};
对于let i=0；i{
让copyTextFromList=；
对于listCopy的let项{
如果item.parentNode.querySelectorinput:已选中{
copyTextFromList+=item.textContent+'，'；
}
}
clonedCode.innerHTML=copyTextFromList；
};
//将输入字段中的项目添加到列表中
addItemButton.addEventListener'click'，=>{
让li=document.createElement'li'；
设span=document.createElement'span'；
span.textContent=addItemInput.value；
李斯特；
李。斯潘；
附件列表按钮li；
addItemInput.value=；
};
//功能：移除按钮
addEventListener'click'，事件=>{
如果event.target.tagName==“按钮”{
如果event.target.className=='remove'{
让li=event.target.parentNode；
设ul=li.parentNode；
ul.removeChildli；
}
}
};
/*谷歌字体*/
@导入url'https://fonts.googleapis.com/css?family=Heebo:300,400,700';
/*根*/
：根{
-白色：fff；
-黑色：2D3142；
-彩色-黑色-2:0E1116；
-颜色灰色：CEE5F2；
-颜色-gray-2:ACCBE1；
-颜色-灰色-3:CEE5F2；
-绿色:439775 ;；
-蓝色：4686CC；
}
身体{
字体系列：“Heebo”，无衬线；
字体大小：400；
字体大小：16px；
颜色：黑色；
}
氢{
字号：700；
字体大小：1.5rem；
}
h3{
字号：700；
字体大小：1.25rem；
}
钮扣{
背景：蓝色；
填充物：5px10px；
边界半径：5px；
颜色：白色；
}
[可拖动]{
-moz用户选择：无；
-khtml用户选择：无；
-webkit用户选择：无；
用户选择：无；
-khtml用户拖动：元素；
-webkit用户拖动：元素；
}
保险单{
列表样式类型：无；
填充：0；
最大宽度：300px；
}
.列表按钮{
背景：颜色为黑色；
}
.清单项目{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
宽度：自动；
保证金：5px自动；
填充物：5px；
光标：移动；
背景：颜色为灰色；
边界半径：5px；
}
.list-item.draggingElement{
不透明度：0.4；
}
.list-item.over{
边框顶部：3倍纯色绿色；
}
按钮。移除{
保证金：自动0自动；
}
输入{
保证金：自动5px自动0；
}
.按钮包装{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
最大宽度：300px；
}
.button包装器.addItemInput{
宽度：63%；
边界半径：5px 0 5px；
}
.button包装器.addItemButton{
宽度：35%；
边界辐射
ius:0 5px 5px 0；
}
.button包装器.generateCode{
宽度：100%；
背景：绿色；
边缘顶部：5px；
}
.p.代码{
背景：灰色；填充：5px；
边框：1px实心var-color-gray-2；
最小高度：20px；
字体大小：300；
}
标题
英雄
简介
页脚
添加项
生成代码
密码
@好极了，我认为这个评论属于这个问题，而不是我的答案……你是对的——对不起，我不知道这是怎么回事happened@Bravo我认为这个评论属于这个问题，而不是我的答案…你是对的-对不起，我不知道这是怎么发生的这与字符串长度有什么关系？这与字符串长度有什么关系？