JS - ボタンを押してhtmlリスト内の項目を選択して線を引く方法は？

私はちょうどJSを学び始め、解決方法を理解できない特定のタスクに衝突しました。JS - ボタンを押してhtmlリスト内の項目を選択して線を引く方法は？

リストがあるページがあり、このリストに新しいケースを追加できるボタンがあるとします。私が遭遇した問題：既存の要素と追加された要素のリストから選択された行のスタイルを変更する特定の方法で関数を実装する必要があります。

たとえば、「私たちがしなければならないことのリスト」というリストの場合、ユーザーは「完了」ボタンを押して目的の行を選択できるようにする必要があります。選択後、選択された行はラインスルーになります。

function addItemToTheList() { 
 
    var newItem = document.createElement("li"); 
 
    var input = document.getElementById("Input"); 
 
    newItem.innerHTML = input.value; 
 
    input.value = ""; 
 
    document.getElementById("todo").appendChild(newItem); 
 
}

#todo { 
 
    font-family: Arial; 
 
} 
 

 
#todo .done { 
 
    color:gray; 
 
    text-decoration:line-through; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title> How can user change added and predefined elements in the list?</title> 
 
    </head> 
 
<pre> 
 
<input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here"> <input 
 
type = "button" value = "Add" onclick = "addItemToTheList()"> 
 

 
</pre> 
 
<hr align = "left" width = "378"> 
 
    <body> 
 
    <div id = "todoList"> 
 
\t  <ol id = "todo"> 
 
     <li class = "done"> Watch all seasons of "Game of Thrones"</li> 
 
     <li class = "done"> Write a book</li> 
 
     <li class = "undone"> Learn "JS"</li> 
 
     </ol> 
 
    </div> 
 
    </body> 
 
</html>

誰もが正しい方向に私を指すことをいとわないだろうか？

出典

2016-10-25 MacroG0D

トム、それ以上の質問

気軽にやって私から何を学ぶだろうユーザはボタンをクリックし、リストの取り消し線を変更し、アイテムをクリックし、完了したとき、そのアイテムには取り消し線が与えられるか、状況に応じて削除されます。 –

@ArnavBorborah私はOPが「完了」をクリックして、打ち切りたいアイテムをクリックすると言っていると思います。「完了」をクリックした後にアイテムをクリックすると、リストアイテムはストライクスルーでリスタイルされます。 – leigero

あなたは、別の関数を作成するのliの各項目にボタンを追加し、各ボタンにクリック機能に追加する必要があります。この

希望は何をしたいですクラスを完了するように変更します。

ここにjsfiddleリンクがあり、必要な作業を開始しました。それは完全に機能していないですが、あなたはすべて:)

https://jsfiddle.net/nu6b00o0/

(function(){ 
var buttons = document.getElementsByTagName('button'); 

for(i = 0; i <= buttons.length -1; i++){ 
buttons[i].addEventListener('click', function() { 
    doOrUndoItem(); 
}, false); 
if(buttons[i].parentNode.className == 'done'){ 
buttons[i].className = 'btn-success'; 
} else { 
buttons[i].className = 'btn-warning'; 
} 
} 
}());

あなたは、言っている

出典

2016-10-26 07:57:57

それぞれの取り消したタスクには、最初にclickイベントを追加する必要があります。その後、タスクを作成するときには別のclickイベントを追加するだけです。

その後、元に戻したタスクをクリックして状態を変更するだけです。

function addItemToTheList() { 
 
    var newItem = document.createElement("li"); 
 
    var input = document.getElementById("Input"); 
 
    newItem.innerHTML = input.value; 
 
    input.value = ""; 
 
    document.getElementById("todo").appendChild(newItem); 
 
    
 
    // Add click listener 
 
    newItem.addEventListener('click', done); 
 
} 
 

 
function done() { 
 
    this.className = "done"; 
 
    this.removeEventListener('click',done); 
 
} 
 

 
// Initialize all listener for current undone tasks 
 
function init() { 
 
    var undoneItems = document.getElementsByClassName('undone'); 
 
    for(var i = 0; i < undoneItems.length; i++){ 
 
    undoneItems[i].addEventListener('click', done); 
 
    } 
 
}

#todo { 
 
    font-family: Arial; 
 
} 
 

 
#todo .done { 
 
    color:gray; 
 
    text-decoration:line-through; 
 
} 
 

 
#todo .undone { 
 
    cursor: pointer; 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title> How can user change added and predefined elements in the list?</title> 
 
    </head> 
 
    <body onload="init()"> 
 
    <pre> 
 
     <input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here">  <input 
 
type = "button" value = "Add" onclick = "addItemToTheList()"> 
 

 
    </pre> 
 
    <hr align = "left" width = "378"> 
 
    <div id = "todoList"> 
 
\t  <ol id = "todo"> 
 
     <li class = "done"> Watch all seasons of "Game of Thrones"</li> 
 
     <li class = "done"> Write a book</li> 
 
     <li class = "undone"> Learn "JS"</li> 
 
     </ol> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-10-25 16:37:03

まずは、ありがとう！これは私が探していたものです。私はまだ正確にそれが働いているが、私はそれに行く途中です。新しい要素をデフォルトで「元に戻す」方法を教えてもらえますか？「完了」要素を「元に戻す」ように戻す方法。全体像を理解するのに役立ちます。もう一度お手数をおかけします。 – MacroG0D

JS - ボタンを押してhtmlリスト内の項目を選択して線を引く方法は？

答えて

関連する問題