如何将用户输入的搜索字符串传入JavaScript变量调用Google Books API？

你的代码里有几个关键错误，导致获取用户输入后功能失效：

1. 错误的变量赋值
   你把获取输入框值的代码当成字符串赋值给了term变量：

let term = "document.getElementById(\"searchterm\").value;"

这会让term的值变成字符串document.getElementById("searchterm").value;，而不是输入框里的实际内容。应该直接执行这段代码来获取值：

let term = document.getElementById("searchterm").value.trim(); // 加trim去掉输入前后的空格

2. 函数作用域问题
   你用$(function booksearch(){...})的方式定义函数，会让booksearch变成DOM加载完成回调的局部函数，按钮的onclick="booksearch()"根本找不到这个函数。改成全局函数定义即可：

function booksearch(){
    // 函数内容放在这里
}

3. URL编码问题
   用户输入的内容可能包含空格、特殊字符，直接拼到URL里会导致请求错误，必须用encodeURIComponent对关键词进行编码：

var parameter = "?q=" + encodeURIComponent(term) + "&startIndex=30&maxResults=15";

4. 其他小问题

• 页面里的<div id="results" style="display: flex; flex-wrap: wrap;&quot;">多了个多余的"，删掉后变成<div id="results" style="display: flex; flex-wrap: wrap;"></div>
• 原来的<h2>里固定显示“Searched "jquery";”，应该改成根据用户输入动态更新，比如在获取到结果后添加：$("#title").text('Searched "' + term + '"');
• 增加无结果的判断，避免没有搜索结果时代码报错

修正后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Google Books Search</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<h1 id="title"></h1>
<h2>Total results: <span id="total"></span>
<p>The results from 30 to 45 are displayed here (15 per page; results page #3).</p></h2>
<div id="results" style="display: flex; flex-wrap: wrap;"></div>
<input id="searchterm" type="text" placeholder="Search..." >
<button onclick="booksearch()">Search</button> 
<script>
function booksearch(){
    let term = document.getElementById("searchterm").value.trim();
    if(!term) return; // 空输入不发起请求
    var parameter = "?q=" + encodeURIComponent(term) + "&startIndex=30&maxResults=15"; 
    var service_point = "https://www.googleapis.com/books/v1/volumes/" + parameter;
    $.getJSON(service_point, function (json)
    {
        console.log(json);
        $("#title").text('Searched "' + term + '"');
        var total = json.totalItems;
        $("#total").text(total); 
        
        var resultHTML = "";
        if(json.items){ // 处理无结果的情况
            for (let i = 0; i < json.items.length; i++)
            {
                var booktitle = json.items[i].volumeInfo.title;
                var bookid = json.items[i].id;
                var cover = "";
                if (json.items[i].volumeInfo.imageLinks != null)
                    cover = json.items[i].volumeInfo.imageLinks.smallThumbnail;

                resultHTML += "<div class='bookdiv'>";
                resultHTML += "<img src='" + cover + "' style='float: left' />";
                resultHTML += "<a href='bookinfo.html?id=" + bookid + "'>" + booktitle + "</a>";
                resultHTML += "</div>";
            }
        } else {
            resultHTML = "<p>No results found</p>";
        }
        $("#results").html(resultHTML); 
        $(".bookdiv").css("width", "300px");
    });
}
</script>
</body>
</html>

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