向附加的li-Javascript添加样式颜色

在列表中添加新项目时，我希望它根据输入值更改颜色

如何将input.value添加到新的附加li项

如果有人能帮忙的话，我已经创建了一个密码笔

//DIV切换
const toggleButton=document.querySelector（“#toggleList”）；
const listDiv=document.querySelector（'.list'）；
//用户输入
const userInput=document.querySelector（'.userInput'）；
const button=document.querySelector（'button.description'）；
const p=document.querySelector（'p.description'）；
让listItem=document.querySelectorAll（'li'）；
//添加项
const addItemInput=document.querySelector（'.addItemInput'）；
const addItemButton=document.querySelector（'button.addItemButton'）；
按钮。addEventListener（'单击'，（）=>{
for（设i=0；i{
if（listDiv.style.display=='none'）{
listDiv.style.display='block'；
toggleButton.textContent='隐藏列表'；
}否则{
listDiv.style.display='none'；
toggleButton.textContent='显示列表'；
}
});
addItemButton.addEventListener（'单击'，（）=>{
let list=document.querySelector（'ul'）；
设li=document.createElement（'li'）；
li.textContent=addItemInput.value；
设appendedItem=list.appendChild（li）；
console.log（appendedItem）；
for（设i=0；i

答案很简单

在执行js时定义初始列表，但新元素是动态创建的。因此，您必须基于所有元素（包括新元素）创建一个新的节点列表。您只需在当前单击事件中重新定义它：

button.addEventListener('click', () => {
   listItem = document.querySelectorAll('li');
   for(let i = 0; i < listItem.length; i++) {
        listItem[i].style.color = userInput.value;
   }
   p.innerHTML = userInput.value + ':';
});

这是新的：

//DIV TOGGLE
const toggleButton = document.querySelector('#toggleList');
const listDiv = document.querySelector('.list');
var lastPickedColor = "black"; // it will store the last picked color
//User INPUT
const userInput = document.querySelector('.userInput');
const button = document.querySelector('button.description');
const p = document.querySelector('p.description');
let listItem = document.querySelectorAll('li');

//ADD ITEM
const addItemInput = document.querySelector('.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');

button.addEventListener('click', () => {
   lastPickedColor = userInput.value;
   for(let i = 0; i < listItem.length; i++) {
     listItem[i].style.color = lastPickedColor;
   }
   p.innerHTML = userInput.value + ':';
});

toggleButton.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    listDiv.style.display = 'block';
    toggleButton.textContent = 'Hide list';
  } else {
    listDiv.style.display = 'none';
    toggleButton.textContent = 'Show list';
  }
});

addItemButton.addEventListener('click', () => {
  let list = document.querySelector('ul');
  let li = document.createElement('li');
  li.style.color = lastPickedColor; // so it will add li with last picked color
  li.textContent = addItemInput.value;
  let appendedItem = list.appendChild(li);
  console.log(appendedItem);
  for(let i = 0; i < appendedItem.length; i++) {
    appendedItem[i].style.color = userInput.value;
  } 
  console.log(appendeditem);
  addItemInput.value = '';
});

//DIV切换
const toggleButton=document.querySelector（“#toggleList”）；
const listDiv=document.querySelector（'.list'）；
var lastPickedColor=“黑色”//它将存储最后拾取的颜色
//用户输入
const userInput=document.querySelector（'.userInput'）；
const button=document.querySelector（'button.description'）；
const p=document.querySelector（'p.description'）；
让listItem=document.querySelectorAll（'li'）；
//添加项
const addItemInput=document.querySelector（'.addItemInput'）；
const addItemButton=document.querySelector（'button.addItemButton'）；
按钮。addEventListener（'单击'，（）=>{
lastPickedColor=userInput.value；
for（设i=0；i{
if（listDiv.style.display=='none'）{
listDiv.style.display='block'；
toggleButton.textContent='隐藏列表'；
}否则{
listDiv.style.display='none'；
toggleButton.textContent='显示列表'；
}
});
addItemButton.addEventListener（'单击'，（）=>{
let list=document.querySelector（'ul'）；
设li=document.createElement（'li'）；
li.style.color=lastPickedColor；//因此它将使用上次拾取的颜色添加li
li.textContent=addItemInput.value；
设appendedItem=list.appendChild（li）；
console.log（appendedItem）；
for（设i=0；i

---

我将lastPickedColor变量添加到页面顶部，每当您更改颜色时，它都会存储lastPickedColor和使用此颜色添加的所有列表。

因此我对代码进行了2次更改。请看

第一次改变

   addItemButton.addEventListener('click', () => {
       let list = document.querySelector('ul');
       let li = document.createElement('li');
       li.textContent = addItemInput.value;
       let appendedItem = list.appendChild(li); 
       appendedItem.style.color =  list.firstElementChild.style.color; //The newly appended item is given the color of the first list element. In your case, this would be whatever color the user chose last.
   });

第二个变化：

我补充说

       document.querySelectorAll('li');

---

在事件处理程序中设置颜色更改按钮，以便每次计算新列表的长度。

可以使用jQuery吗？@PraveenKumar Native javascript更好/rants@RoberrrtjQuery是用原生JS编写的<代码>；）哈哈，我知道，我知道。让我们创建两个答案，我将编写本机答案，您准备好jQuery答案了吗？codepen代码不工作Hi Robert，我正在尝试将输入值添加到新的附加列表项。因此，当我添加一个新的列表项时，它将是输入的颜色。上面的值你的意思是，附加你试图更改的颜色？它在erols答案中如何工作，谢谢你，无论如何，我不擅长提问（需要更多练习）是的，尽管你应该结合解决方案。如果你在添加了一个新的列表项后更改颜色，我没有否决这个Erol，它确实可以按照我的意愿工作。谢谢！：-），我不知道为什么是这样，先生，抱歉误会：）我也谢谢你。我也不知道为什么，但是因为你的答案被否决而否决其他答案是愚蠢的。事实上我这样做不是为了愤怒，我认为更好的方法是这个代码，但我撤销了它，伙计，我不想引起任何心碎：）

   addItemButton.addEventListener('click', () => {
       let list = document.querySelector('ul');
       let li = document.createElement('li');
       li.textContent = addItemInput.value;
       let appendedItem = list.appendChild(li); 
       appendedItem.style.color =  list.firstElementChild.style.color; //The newly appended item is given the color of the first list element. In your case, this would be whatever color the user chose last.
   });

       document.querySelectorAll('li');