私はtodolistをやろうとしていますが、うまくいきません。

-6

JavaScriptを習得し始めました。私はtodolistをやろうとしていますが、うまくいきません。

ToDoリストは、我々がやりたいタスクが含まれます：ここでが要件です。
最初にリストには、これらの定義済みアイテムが含まれます（下記のモックアップを参照）。 a。フルスタックWebコースに登録 b。選択日に出席する c。
タスクが完了すると、の取り消し線フォントとグレー色のタスクテキストが表示され、適切なCSSクラスを使用してマークされます。 a。リストの項目（b）は完了したものとして表示されます。
ユーザーは、入力ボックスにテキストを入力して、1行のテキストを6〜42文字の間で入力し、[追加]ボタンを押すことで、新しい項目をリストに追加できます。
新しいアイテムがリストの先頭に追加されます。
純粋なJavaScriptを使用する - フレームワークなし。

***私はこれらすべてのことをやったが、うまくいかない。私は、アクションがhtmlボックスで手動で行われない限り、実行されたタスクをマークすることはできません。ここでは、これまでのコードです：私の英語のための

[https://jsfiddle.net/amir_nazarov/0tf5gwky/24/][1]

申し訳ありませんが、助けてくれてありがとう。

出典

2017-05-07 amir nazarov

スタックオーバーフローの投稿にコードを入れてください。jsfiddleにリンクしてください。 Stack Overflowとjsfiddleは互いに関係しておらず、あなたのフィドルやjsfiddleが何らかの理由でこの投稿と関連しなくなった場合、この投稿に将来着陸する人は元のコードを参照することができません。それはjsfiddle、btwであるので、SOに追加するのと同じくらい簡単です。 –

これは期待どおりに機能しますか？https://jsfiddle.net/0tf5gwky/25/ –

申し訳ありませんが、ルールを批判したり、私が投稿でやったことは、私はこれだけでなくサイトでも新しくなりました。はい、それは完璧です！なぜ私が怒っているものが私にはうまくいかなかったのですか？ –

問題はあなたのJavaScriptの先頭にコード、（取り消し線機能を設定します1）が呼ばれることは決してありませんということです。作ってそれの後のコード、および

ようbodyのonclick属性にそのfunctionを追加functionの内側にそのコード、

場所：
は、あなたが持っているこの問題を解決するために、ページがロードされたときに呼び出されます。

this JSFiddleを参照してください。私はそれがあなたが何をしたのかを達成すると思う。

出典

2017-05-07 23:11:30 skunkmb

私は間違いを理解してくれてありがとう。 –

クリックイベントを既存のol li要素にバインドしようとすると、それらの要素はまだ準備されていません。ロードするコンテンツがあるのを待って、イベントリスナーをアタッチします。また、追加ボタンで作成された新しいliエレメントにリスナーをアタッチする必要があります。

document.addEventListener("DOMContentLoaded", function(event) { 
 
    \t var task = document.querySelectorAll('ol li'); 
 
    /* go loop all the way- on tasks */ 
 
\t for (var i = 0; i < task.length; i++) { 
 
    \t 
 
\t \t task[i].addEventListener('click', function(event) { 
 
    \t \t \t event.target.classList.toggle("checked"); 
 
\t \t }, false); 
 
\t } 
 
}); 
 

 

 

 

 

 
function todoList(){ 
 
document.getElementById("todoInput").value 
 
var item = document.getElementById('todoInput').value 
 
if(item.length >= 6 && item.length <= 42) 
 
{ 
 
var text = document.createTextNode(item) 
 
var newItem = document.createElement('li') 
 
\t newItem.appendChild(text) 
 
    
 
    newItem.addEventListener('click', function(event) { 
 
    \t \t \t event.target.classList.toggle("checked"); 
 
\t \t }, false); 
 
\t document.getElementById('todoList').appendChild(newItem) 
 
var list = document.getElementById("todoList"); 
 
list.insertBefore(newItem, list.childNodes[0]); 
 
} 
 
else 
 
{ 
 
alert("The text is in the worng length") 
 
} 
 
}

ol { 
 

 
} 
 
ol li { 
 
    cursor: pointer; 
 
    position: relative; 
 

 
} 
 
ol li:hover { 
 
    background: #ddd; 
 
    color: black; 
 
} 
 
ol li.checked { 
 
    background: #888; 
 
    color: #fff; 
 
    text-decoration: line-through; 
 
} 
 
.checked { 
 
    background: #888; 
 
    color: #fff; 
 
    text-decoration: line-through; 
 
} 
 
ol li.checked::before { 
 
    position: absolute; 
 
    border-color: #fff; 
 
    border-style: solid; 
 

 
}

<!DOCTYPE html> 
 
<body> 
 
     <title>To Do List</title> 
 
     <h1>To Do List</h1> 
 
      <form id="todoForm"> 
 
      <input type="text" placeholder="Add a task here" id="todoInput"> 
 
    <button type="button" onclick="todoList()">Add</button> 
 
      </form> 
 
      <hr> 
 
      <ol id="todoList"> 
 
       <li>Register to Full Stack Web Course</li> 
 
       <li class="checked">Attend Selection Day</li> 
 
       <li>Go see X-Men apocalypse movie</li> 
 
      </ol> 
 
     <script src="js/main.js"></script> 
 
     </body>

出典

2017-05-07 23:04:32 jmtalarn

ありがとうございました!!!! –

私はtodolistをやろうとしていますが、うまくいきません。

答えて

関連する問題