个人中心
gpt4 book ai didi

javascript - 如何在列表中添加新书？

转载 作者：行者123 更新时间：2023-12-01 00:00:40 26 4
gpt4 key购买 nike

我试图创建一个小程序，当用户添加一本新书时，它应该在列表中添加新书，但是当我点击添加按钮时，它一直要求我输入一些值，我为此工作了 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/

26 4 0
文章推荐： javascript - 在 javascript onevent 函数中使用它
文章推荐： javascript - NodeJS 函数返回已解析的 Promise 值而不是 Promise？
文章推荐： javascript - 在 JavaScript 中使用全局变量还是局部变量作为常量？
文章推荐： javascript - 如何在循环列表时根据条件更改 className？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com