將樣式顏色添加到添加的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'); 

事件處理程序中的顏色變化按鈕，這樣每次的長度新的列表被計算。