Sun. Oct 1st, 2023

[ANSWERED] javascript – how to add new book in the list?

By

Nov 19, 2022 css, html, javascript, jquery

Solution 1 :

On your Javascript code you forgot to include the # to indicate that you would like to get the element identified by 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>");
        };
    });

});

Solution 2 :

The .val() method is primarily used to get the values of form elements
such as input, select and textarea.

You are actually comparing $(…).length to number, not $(…).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>");
    };
});
});

Should work for you.

Problem :

im trying to create a small program when the user add a new book it should suppose to add the new book in the list but when im clicking on the add button it keeps asking me enter some value im working on this for 5 hours and still can not find it why im getting this any help would be appreciated in advance

$(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>

Comments

Comment posted by marie

just one more question do you know how to make it works when the user moves the mouse pointer onto a list element, the element moves to right “80 pixels” and its font size increases “1em”.

Comment posted by here

Based on your actual code, there are two ways to make this effect: using CSS like

Comment posted by marie

i saw that but im trying to do is when the user moves the mouse pointer onto a list element, the element moves to right “80 pixels” and its font size increases “1em”

Comment posted by marie

Thank you for taking time and helping but i want to do that jquery not css

Comment posted by marie

thank you so muchhhhhhh <3 .just one more question do you know how to make it works when the user moves the mouse pointer onto a list element, the element moves to right “80 pixels” and its font size increases “1em”.

Comment posted by Hyunnique

@marie I can’t actually know how you want to move object, but try using something like li:hover at css and control font-size and paddings.

Comment posted by marie

I want to change the font size of the item incrementally when you mouse hover the item with jQuery

Comment posted by Hyunnique

@marie I think you’d better use :hover css pseudo class to make code clean, but if you really want to do it with incremental way just do $(“li”).on(“mouseover”, function(e){ $(e.target).css(“font-size”, “+=1em”); }); and on mouseleave event “-=1em”.

Comment posted by Hyunnique

@marie li:hover { margin-left: 80px; font-size: calc(24px + 1em); }

By

Related Post

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022