innerhtml - 将innerHTML文本从JSON传递到点击事件的表单

Question

我正在使用 Google 图书 API 来检索图书信息。我要做的是传递返回的信息（书名、作者等），然后单击填写表格。

每次 API 搜索都会返回 10 本书。

我的问题出在自动填充功能的右侧，我尝试过使用它，但我遗漏了一些东西，我将不胜感激任何帮助以及背后的逻辑。

谢谢！

这就是我的表单的一部分：

<div class="form-group">
    <label class="bmd-label-floating" for="book_title">Book Title*</label><br>
    <input class="form-control" type="text" id="book_title" name="book_title" required="required" placeholder="Enter your book title"/>
    <span class="mdl-textfield__error">Please enter a book name</span>
</div>

这是我的自动填充功能：

    function autoFill() {
        document.getElementById('book_title').value = json.items[i].volumeInfo.title
        document.getElementById('book_author').value = author; 
        document.getElementById('book_language').value = language; 
        document.getElementById('b_isbn').value = isbn; 
}

这就是我从 API 获取书籍的方式：

$("#search_form").submit(function(e) {
    $("#books").html("");

    e.preventDefault();

    var searchQuery = $("#search_txt").val();
    searchQuery = searchQuery.split(" ").join("+");

    if (!searchQuery) {
        searchQuery = "paleo";
    }

    $.ajax({
        url: "https://www.googleapis.com/books/v1/volumes?q=" + searchQuery,
        success: function(json) {
        var thumb = "";
        var htmlcontent = "";
        var author = "";
        var p_date = "";
        var language = "";
        var isbn = "";

        for (i = 0; i < json.items.length; i++) {
            if (typeof json.items[i].volumeInfo.imageLinks != "undefined") {
            thumb = json.items[i].volumeInfo.imageLinks.smallThumbnail;
            } else {
            thumb = "http://i.imgur.com/oM3MdAi.png"; // image not available
            // thumb = 'http://slems-oldboys.org.uk/library/wp-content/uploads/2013/11/library_nocover.jpg'
            }
            // Author
            if (typeof json.items[i].volumeInfo.authors != "undefined") {
            author = json.items[i].volumeInfo.authors[0];
            }
            
            // Published Date
            if (typeof json.items[i].volumeInfo.publishedDate != "undefined") {
            p_date = json.items[i].volumeInfo.publishedDate;
            }

            // Language
            if (typeof json.items[i].volumeInfo.language != "undefined") {
            language = json.items[i].volumeInfo.language;
            }

            // ISBN
            if (typeof json.items[i].volumeInfo.industryIdentifiers != "undefined") {
            isbn = json.items[i].volumeInfo.industryIdentifiers[0].identifier;
            }

            htmlcontent +=
            "<div class='thumbs' style='cursor: pointer;' onclick='autoFill(); return true;'><b>Book Title: </b>" +
            json.items[i].volumeInfo.title +
            "</b>" +
            '<img src="' +
            thumb +
            '" + alt="' +
            json.items[i].volumeInfo.title +
            '">' +
            "<br><b>Author: </b>" +
            author +
            "<br><b>Published Date: </b>" +
            p_date +
            "<br><b>Language: </b>" +
            language +
            "<br><b>ISBN_13: </b>" +
            isbn +
            '</div>' + "<div class='clearfix'></div>";
        }
        document.getElementById("books").innerHTML =
            "<div>" + htmlcontent + "</div><br>";
        }
    });
});

编辑：

带有图像的示例：

这是正在返回的信息的一部分：

正在返回的信息

这是表单的样子：

形式

我正在尝试通过单击包含正在返回的信息的 div 将一些正在返回的信息（不是全部）添加到表单中。

标签： innerhtmlgetelementbyid