使用Google Books API时，.innerHTML无法在页面展示查询结果

我帮你排查出了几个关键问题，这才导致数据没法正常显示在页面上，咱们一步步修正：

问题1：搜索值获取错误 #

你尝试通过document.getElementById('search').value获取用户输入，但HTML里的搜索输入框id是books（外层容器的id才是search），这会导致你拿到的是undefined，API请求的关键词根本不对。

问题2：拼写错误导致循环不执行 #

循环条件里的data.items.lenght是拼写错误，正确的属性名是length，这个错误会让循环直接跳过，根本不会处理返回的数据。

问题3：innerHTML覆盖内容 #

每次循环都用results.innerHTML = ...会覆盖之前的内容，最终页面只会显示最后一本书的标题，应该用+=来追加内容。

问题4：未定义的results变量 #

你直接使用results.innerHTML，但没有提前获取对应的DOM元素，需要先声明变量指向结果容器。

问题5：表单提交事件绑定（可能遗漏） #

确保bookSearch函数绑定到表单的提交事件，否则点击搜索按钮不会触发查询逻辑。

修正后的代码 #

HTML（仅修正一处class冗余）

<!DOCTYPE html>
<html>
<head>
    <title>Google Books API Search</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="search" class="grey lighten-4 z-depth-5"> <!-- 去掉class里多余的#f5f5f5（颜色值无需加#） -->
        <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>
    <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 */
function bookSearch(event) {
    /* eslint-disable no-console */
    event.preventDefault(); // 阻止表单默认提交刷新行为
    
    // 1. 正确获取搜索输入框的值
    const searchQuery = document.getElementById('books').value;
    const resultsContainer = document.getElementById('results');
    
    // 清空之前的结果
    resultsContainer.innerHTML = '';
    
    if (!searchQuery) return; // 空查询时直接返回，避免无效请求
    
    $.ajax({
        url: `https://www.googleapis.com/books/v1/volumes?q=${searchQuery}`,
        dataType: "json",
        success: function(data) {
            console.log(data);
            // 2. 修正length拼写错误，同时判断items是否存在（避免无结果时报错）
            if (!data.items || data.items.length === 0) {
                resultsContainer.innerHTML = '<p>No books found.</p>';
                return;
            }
            // 3. 用+=追加内容，而不是覆盖
            for (let i = 0; i < data.items.length; i++) {
                const bookTitle = data.items[i].volumeInfo.title;
                resultsContainer.innerHTML += `<h2>${bookTitle}</h2>`;
            }
        },
        error: function() {
            resultsContainer.innerHTML = '<p>Failed to fetch books. Please try again.</p>';
        },
        type: "GET"
    });
}

// 4. 绑定表单提交事件，确保点击搜索按钮触发查询
document.getElementById('bookForm').addEventListener('submit', bookSearch);

额外优化说明：

• 增加空查询判断，避免发送无效API请求
• 处理无搜索结果的情况，给用户明确提示
• 添加请求错误处理，当API请求失败时显示友好提示
• 使用let声明循环变量i，避免全局变量污染

内容的提问来源于stack exchange，提问作者Edoardo Trotta