待辦事項列表中的項目未添加到div

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的替代方法，您可以使用e.preventDefault()來阻止表單提交。

這裏有一個更新腳本中刪除表格和糾正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>