我试图创建一个小程序，当用户添加一本新书时，它应该在列表中添加新书，但是当我点击添加按钮时，它一直要求我输入一些值，我为此工作了 5 个小时并且仍然找不到它为什么我得到这个任何帮助将提前不胜感激
$(function() {
$("#page p").text("james bond");
$("#add").on("click", function() {
var itemDescription = $("itemDescription");
var newItem = itemDescription.val();
if(itemDescription.length === 0 ) {
alert("Enter some value");
} else {
$("#page li:last").after("<li>" + newItem + "</li>");
};
});
});body {
background-color: #000;
font-family: 'Oswald', 'Futura', sans-serif;
margin: 0px;
padding: 0px;}
#page {
background-color: #F0FFFF;
margin: 0px auto 0px auto;
position: relative;
text-align: center;}
h1 {
background-position: center center;
text-align: center;
text-indent: -1000%;
height: 40px;
line-height: 75px;
width: 117px;
margin: 0px auto 0px auto;
padding: 30px 10px 20px 10px;}
h2 {
color: #DC143C;
font-size: 24px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
letter-spacing: .3em;
display: inline-block;
margin: 0px 0px 23px 0px;}
ul {
border:none;
padding: 0px;
margin: 0px;}
li {
background-color: #F8F8FF ;
color: #696969;
border-top: 1px solid #fe9772;
border-bottom: 1px solid #9f593f;
font-size: 24px;
letter-spacing: .05em;
list-style-type: none;
text-align: left;
height: 50px;
padding-left: 1em;
padding-top: 10px;}
form {
padding: 0px 20px 20px 20px;}
label {
color: #fff;
display: block;
margin: 10px 0px 10px 0px;
font-size: 24px;}
input[type='text'] {
background-color: #999;
color: #333;
font-size: 24px;
width: 96%;
padding: 4px 6px;
border: 1px solid #999;
border-radius: 8px;}
input[type='button'], button {
background-color: #cb6868;
color: #f3dad1;
border-radius: 8px;
border: none;
padding: 8px 10px;
margin-top: 10px;
font-family: 'Oswald', 'Futura', sans-serif;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;}
#newItemButton {padding: 10px 20px 75px 20px; display: none;}
#newItemForm {padding-top: 20px;}
#itemDescription {width: 360px;}
#newItemForm input[type='submit'] {margin-top: 0px; text-align: left;}
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}<html>
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="myCSS.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="movies.js"></script>
</head>
<body>
<div id="page">
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description" />
<input type="button" id="add" value="add" />
</form>
<h1 id="header">Movies</h1>
<h2>Movies</h2>
<ul>
<li id="one" >Mad Max</li>
<li id="two">Fugitive</li>
</ul>
<p> Qais khatiz</p>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>最佳答案
在您的 Javascript 代码中，您忘记包含 # 来指示您想要获取由 id itemDescription 标识的元素。
$(function() {
$("#page p").text("james bond");
$("#add").on("click", function() {
var itemDescription = $("#itemDescription"); // here was the problem
var newItem = itemDescription.val();
if(itemDescription.length === 0 ) {
alert("Enter some value");
} else {
$("#page li:last").after("<li>" + newItem + "</li>");
};
});
});
关于javascript - 如何在列表中添加新书？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60766099/