待办事项列表中的项目未添加到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>