我正在尝试使用Google Books API创建一个可显示查询结果的网络应用。 我的代码正在运行,但是.innerHTML在Html页面上未显示任何结果。这是我正在使用的HTML。
<!DOCTYPE html>
<!-- -->
<html>
<head>
<title>Google Books API Search</title>
<!--linkink stylesheet-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="search" class="#f5f5f5 grey lighten-4 z-depth-5">
<form id="bookForm">
<div class="inputField">
<input type="search" id="books">
<label for="search">Search for books</label>
</div>
<div class="btnHolder">
<button id="button" class="btn red">Search</button>
</div>
</form>
</div>
<div id="results">
</div>
<!--linking scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
这是正在运行的JavaScript代码。
/*global document, $, console, event, results */
function bookSearch() {
/* eslint-disable no-console */
event.preventDefault(); //preventing auto refresh of the page
//console.log("This function is working."); //console.log to see if the function was running properly
var search = document.getElementById('search').value; //storing the value of search
document.getElementById('results').innerHTML = '';
console.log(search);
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=" + search, //linking API + our search
dataType: "json",
success: function(data) {
console.log(data)
for (i=0;i<data.items.lenght;i++){
results.innerHTML = "<h2>" + data.items[i].volumeInfo.title + "</h2>"
}
},
type: "GET"
})
}
从控制台中,我可以看到以正确的方式将数据收集到了API,但是主要问题是我无法设法在页面本身上显示结果。 也许这只是一个愚蠢的错误,但我正在努力寻找解决方案。
答案 0 :(得分:0)
您没有检索DOM元素results
和分配innerHTML
:
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=" + search, //linking API + our search
dataType: "json",
success: function(data) {
console.log(data)
// ADD THIS LINE
var results = document.getElementById('results');
for (i=0;i<data.items.length;i++){ // YOU HAD A TYPO HERE WITH `length`
// YOU WANT TO CONCATENATE CONTENT OTHERWISE YOU'LL REPLACE IT EACH TIME
results.innerHTML += "<h2>" + data.items[i].volumeInfo.title + "</h2>"
}
},
type: "GET"
})
绝对建议尽可能以最少的数量更新DOM,因此最好创建并分配一个变量,然后一次分配results.innerHTML
。但这应该可以帮助您入门。
答案 1 :(得分:0)
我认为您想要一个接一个地写多个结果,但是您覆盖了“结果”内容。一种解决方法是:
success: function (data) {
for (let i = 0; i < data.items.length; i++ ) {
results.innerHTML += '<h2>'+ data.items[i].volumeInfo.title +'</h2>';
// ^ defined ^ see the plus sing in the declaration
}
}