追加されたli - Javascriptにスタイルカラーを追加する

Question

新しいアイテムをリストに追加するとき、入力値に基づいて色を変更したいと思います。

input.valueを新しい追加されたliアイテムに追加するにはどうすればよいですか？誰もが 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

答えは非常に簡単です助けることができるかどう

私はcodepenを作成しました。

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

ここで

Answer 2

Working codepen exampleは新しいものです：

//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

私はコードを動作させるために2つの変更を加えました。 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. 
    }); 

2番目の変更を参照してください：毎回よう

を私は、の長さを色変更ボタンのイベントハンドラ内部

 document.querySelectorAll('li'); 

を追加しました新しいリストが計算されます。