I am trying to use JQuery and ready() and click(). I get something like this:
It seems I have ready is not using and so click(). I have no idea what is going here, and I am a new beginer. Do not know if anyone needs to see my css file to solve the problem. Do not know why. How to fix it???
My code:
book-add.js
$(document).ready(function(){
function createBookObject(){
let book = {};
book.id = $("#add-book-id").val();
book.name = $("#add-book-name").val();
book.authors = $("#add-book-author").val();
book.year = $("#add-book-year").val();
book.publisher = $("#add-book-publisher").val();
return book;
};
$("btn-add-book-insert").click(function(event){
event.preventDefault()
});
});
index.html
<!DOCTYPE html>
<head>
<title>Book Store App</title>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<nav>
<div class="tab">
<button id ="btn-books"> Books </button>
<button id ="btn-loans"> Loans</button>
</div>
</nav>
<div id = "books_btns" class="tabcontent">
<button id ="add-books"> Add a book</button>
<button id ="show-books"> Show a book</button>
<button id ="detail-books">Detail book</button>
<button id ="update-books">Update book</button>
<button id ="delete-books">Delete book</button>
</div>
<div id = "loans_btns" class="tabcontent">
<button id ="add-loans"> Add a loan</button>
<button id ="show-loans"> Show loans</button>
<button id ="detail-loans">Update loan</button>
<button id ="delete-loans">Delete loan</button>
</div>
<div id = "books-add-form" class="toshow" style="display:none">
<form>
<label for="">Id</label>
<input id ="add-book-id" type= "number">
<label for="">Name</label>
<input id ="add-book-name" type= "text">
<label for="">Author</label>
<input id ="add-book-author" type= "text">
<label for="">Year</label>
<input id ="add-book-year" type= "number">
<label for="">Publisher</label>
<input id ="add-book-publisher" type= "text">
<div>
<button id="btn-add-book-insert">Insert</button>
<output id="add-out"></output>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$("#btn-books").click(function(){
$("#loans_btns").hide();
$("#books_btns").show();
})
$("#btn-loans").click(function(){
$("#books_btns").hide();
$("#loans_btns").show();
$("div.toshow").hide();
})
$("#add-books").click(function(){
$("div.toshow").show();
})
});
</script>
<script src="./js/book-add.js"></script>
</body>
Aucun commentaire:
Enregistrer un commentaire