Can someone please check what is wrong with my code, it is not working <!DOCTYPE
ID: 3747887 • Letter: C
Question
Can someone please check what is wrong with my code, it is not working
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Milestone 1</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div id="itEbooks">
<p>Sample Data:</p>
</div>
</body>
<script>
//fetches information about a specific book
var bookData;
$.ajax({
url: "https://www.googleapis. com/books/v1/volumes/ Wfan6L9RGgYC "
}).done(function(data) {
for (var book in data) {
$('#itEbooks').append("<p>" + data[book].title + "(" + book + ")<p>");
}
});
</script>
</html>
Explanation / Answer
Your code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Milestone 1</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div id="itEbooks">
<p>Sample Data:</p>
</div>
</body>
<script>
//fetches information about a specific book
var bookData;
$.ajax({
url: "https://www.googleapis. com/books/v1/volumes/ Wfan6L9RGgYC "
}).done(function(data) {
for (var book in data) {
$('#itEbooks').append("<p>" + data[book].title + "(" + book + ")<p>");
}
});
</script>
</html>
I found some errors in the above code and it requires the following changes:
1) Some changes to script syntax. It is present in head tag in your code with the syntax as
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
Change it to <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js" type="text/javascript"></script>
2) Few changes to 2nd script tag it must placed in body or in head tag , the code contains script tag independently out of both body and head tag. So, please look at that change. It would fine if it was placed within body tag.
The above code with 2nd script tag is as follows:
<body>
<div id="itEbooks">
<p>Sample Data:</p>
</div>
</body>
<script>
//fetches information about a specific book
var bookData;
$.ajax({
url: "https://www.googleapis. com/books/v1/volumes/ Wfan6L9RGgYC "
}).done(function(data) {
for (var book in data) {
$('#itEbooks').append("<p>" + data[book].title + "(" + book + ")<p>");
}
});
</script>
Change it to:
<body>
<div id="itEbooks">
<p>Sample Data:</p>
</div>
<script type="text/javascript">
//fetches information about a specific book
var bookData;
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes/Wfan6L9RGgYC"
}).done(function(data) {
for (var book in data) {
$('#itEbooks').append("<p>" + data[book].title + "(" + book + ")<p>");
}
})
</script>
</body>
3)The url in 2nd script tag is as follows url: "https://www.googleapis. com/books/v1/volumes/ Wfan6L9RGgYC " It contains two unwanted spaces which is shown by underlines below url: "https://www.googleapis. com/books/v1/volumes/ Wfan6L9RGgYC " i.e spaces between googleapis. and com spaces between volumes and Wfan6L9RGgYC
Change the above one to:
url: "https://www.googleapis.com/books/v1/volumes/Wfan6L9RGgYC"
The Final code after corrections is:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Milestone 1</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js" type="text/javascript">
</script>
</head>
<body>
<div id="itEbooks">
<p>Sample Data:</p>
</div>
<script type="text/javascript">
//fetches information about a specific book
var bookData;
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes/Wfan6L9RGgYC"
}).done(function(data) {
for (var book in data) {
$('#itEbooks').append("<p>" + data[book].title + "(" + book + ")<p>");
}
})
</script>
</body>
</html>
Note: