To-Doリストの項目は、私の最初のプロジェクトの1つとして、

Question

に追加されていません。 Codecademy上ではうまく動作しますが、codepenに実行したとき、私はノーリターンを得るん：

https://codepen.io/HelleFl/pen/OjNQop

<div class='form'> 
    <form name="checkListForm"> 
     <input type="text" name="checkListItem"/> 
     <button class='btn btn-primary'>Add!</button> 
     <hr> 
    </div> 

    <div> 
    <h3>My to-do list</h3> 
    <div class='container'> 
     <div class='list'> 

     </div> 

    </div> 
    </div> 
</div> 

JS：

$(function(){ 
    $('#button').click(function(){ 
    var toAdd = $('input[name=checkListItem]').val(); 
    $('.list').append('<div class="item">' + toAdd + '</div>'); 
    }) 
}) 

はなぜ項目がリストに追加されませんか？ありがとうございます

Answer 1

#buttonをターゲティングしていて、そのIDを持つ要素がないという問題があります。代わりに、汎用$('button')をターゲットにしています。

ボタンは現在、（不完全な）フォーム内にあることにも注意してください。フォームコンポーネントを削除する必要があります。そのため、実際にどこにでもPOSTする必要はありません（ページが更新されます）。フォームのHTMLを削除する代わりにでフォームの送信を防ぐことができます。ここで

は、更新されたスクリプトのフォームを削除し、click()ターゲットを修正です：

$(function() { 
 
    $('button').click(function() { 
 
    var toAdd = $('input[name=checkListItem]').val(); 
 
    $('.list').append('<div class="item">' + toAdd + '</div>'); 
 
    }) 
 
})

.header, 
 
.form, 
 
h3, 
 
h4 { 
 
    text-align: center; 
 
} 
 

 
.header { 
 
    margin-bottom: 2em; 
 
} 
 

 
hr { 
 
    width: 50%; 
 
    color: green; 
 
    border-width: 1px; 
 
    border-style: inset; 
 
} 
 

 
h3 { 
 
    text-decoration: underline; 
 
} 
 

 
.container { 
 
    background-color: lightgray; 
 
    padding-bottom: 3em; 
 
    padding-top: 1em; 
 
    width: 30%; 
 
} 
 

 
.item { 
 
    color: black; 
 
    font-size 18px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <div class='header'> 
 
    <h1>Simple to-do list</h1> 
 
    <h4>Simply type your item and click add</h4> 
 
    </div> 
 

 
    <div class='form'> 
 
    <input type="text" name="checkListItem" /> 
 
    <button class='btn btn-primary'>Add!</button> 
 
    </div> 
 

 
    <div> 
 
    <h3>My to-do list</h3> 
 
    <div class='container'> 
 
     <div class='list'></div> 
 
    </div> 
 
    </div> 
 
</div>

は、この情報がお役に立てば幸い！ :)

Answer 2

あなたのボタンにIDを与えるのを忘れたようですね。

Answer 3

ここでは、フォームの問題にだけでなく、いくつかの検証をhttps://jsfiddle.net/tgq4vsdt/1/

$(function(){ 
 
    $('#button').click(function(){ 
 
    \t if($('input[name=checkListItem]').val().trim() != ""){ 
 
     var toAdd = $('input[name=checkListItem]').val(); 
 
     $('.list').append('<div class="item">' + toAdd + '</div>'); 
 
    } 
 
    $('input[name=checkListItem]').val('').focus(); 
 
    }) 
 
})

.header, .form, h3, h4 { 
 
    text-align: center; 
 
} 
 

 
.header { 
 
    margin-bottom: 2em; 
 
} 
 

 
hr { 
 
    width: 50%; 
 
    color: green; 
 
    border-width: 1px; 
 
    border-style: inset; 
 
} 
 

 
h3 { 
 
    text-decoration: underline; 
 
} 
 

 
.container { 
 
    background-color: lightgray; 
 
    padding-bottom: 3em; 
 
    padding-top: 1em; 
 
    width: 30%; 
 
} 
 

 
.item { 
 
    color: black; 
 
    font-size 18px; 
 
    border-bottom: 1px solid black; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class='header'> 
 
    <h1>Simple to-do list</h1> 
 
    <h4>Simply type your item and click add</h4> 
 
    </div> 
 
    
 
    <div class='form'> 
 
    \t <input type="text" name="checkListItem"/> 
 
    <button class='btn btn-primary' id="button">Add!</button> 
 
    </div> 
 
    
 
    <div> 
 
    <h3>My to-do list</h3> 
 
    <div class='container'> 
 
     <div class='list'> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>