将样式颜色添加到添加的li - Javascript

Question

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

如何将input.value添加到我新添加的li项目中？

我创建了一个codepen是否有人能够帮助 http://codepen.io/o-sewell/pen/mOBjvQ

// DIV TOGGLE 
const toggleButton = document.querySelector('#toggleList'); 
const listDiv = document.querySelector('.list'); 

// 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',() => { 
    for (let i = 0; i < listItem.length; i++) { 
    listItem[i].style.color = userInput.value; 
    } 

    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.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(appended item); 

    addItemInput.value = ''; 
}); 

Answer 1

的答案很简单。

您正在定义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 + ':'; 
}); 

为了给它的颜色与现有的相同，更改此功能直接应用这些造型的最新添加的元素：

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 = userInput.value; 
    addItemInput.value = ''; 
}); 

Working codepen example

Answer 2

这里是新的：

//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 = ''; 
}); 

无论何时改变颜色，我都会将lastPickedColor变量添加到页面的顶部，它将存储lastPickedColor和所有添加此颜色的列表。

Answer 3

所以我对你的代码做了两处修改。请参阅 http://codepen.io/amoolya/pen/GNMXqa?editors=1111

首先改变

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'); 

事件处理程序中的颜色变化按钮，这样每次的长度新的列表被计算。