如何在列表中添加新書？
[英]how to add new book in the list?
問題描述
我試圖在用戶添加新書時創建一個小程序，它應該假設將新書添加到列表中，但是當我單擊添加按鈕時，它一直要求我輸入一些值，我為此工作了 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>
2 個解決方案
解決方案1
1 2020-03-19 22:50:28
在您的 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>");
};
});
});
解決方案2
1 2020-03-19 22:52:24
.val() 方法主要用於獲取表單元素的值，例如 input、select 和 textarea。
您實際上是在將 $(...).length 與數字進行比較，而不是 $(...).val().length。
$(function() {
$("#page p").text("james bond");
$("#add").on("click", function() {
var itemDescription = $("#itemDescription");
var newItem = itemDescription.val();
if(newItem.length === 0 ) {
alert("Enter some value");
} else {
$("#page li:last").after("<li>" + newItem + "</li>");
};
});
});
應該為你工作。
如何按順序將兩個或第 n 個不同的列表項添加到新列表中？
[英]How to add two or nth different list items with order into a new list?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.