javascript - onClick 和 addEventListner？没有任何作用

Question

所以，我试图让一副用javascript（通过json api）创建的卡片在点击链接“有声读物”时显示出来。但它不起作用。我已经尝试在调用函数的 a-tagg 中单击 onclick，尝试反转它并调用 a-tagg 并应用 eventListner ...我在这里做错了什么？我在网上寻找解决方案，但现在我被卡住了。

链接到精简的小提琴：jsFiddle

//PAGE- Audiobooks

function loadJsonAudiobook() {
    let yhttp = new XMLHttpRequest();
    yhttp.open("GET", "https://www.googleapis.com/books/v1/volumes?q=war+audiobooks", true);
    yhttp.send();
    
    yhttp.onreadystatechange = function(){
    if (yhttp.readystate === XMLHttpRequest.DONE && yhttp.status === 200) {
    let audiobookData = JSON.parse(yhttp.responseText);
    displayAudiobookCards (audiobookData);
} // end of if
}; // end of onreadystate
} // end of loadJsonAudiobook


// DISPLAY CARDS (audiobooks link)  
function displayAudiobookCards(audiobookData) {
    
    var audioDeck = document.getElementById("card2Container");

    var audioRow = document.createElement("div");
    audioRow.setAttribute("class", "row text-center");

    for (var y = 0; y < audiobookData.items.length; y++) {
        if (y === 12) {break;}
        var audioColumn = document.createElement("div");
        audioColumn.setAttribute("class", "col-md-4 pb-1 pb-md-0");

        var audioCard = document.createElement("div");
        audioCard.setAttribute("class", "card");

        var audioImage = document.createElement("img");
        audioImage.setAttribute("class", "card-img-top mx-auto d-block");
        audioImageImage.setAttribute("src", audiobookData.items[i].volumeInfo.imageLinks.thumbnail);

        var audioBody = document.createElement("div");
        audioBody.setAttribute("class", "card-body");

        var audioTitle = document.createElement("h5");
        audioTitle.setAttribute("class", "card-title");
        audioTitle.innerHTML += audiobookData.items[i].volumeInfo.title;
        
        var audioSub = document.createElement("p");
        audioSub.setAttribute("class", "card-subtitle");
        audioSub.innerHTML += audiobookData.items[i].volumeInfo.authors;

        var audioText = document.createElement("p");
        audioText.setAttribute("class", "card-text");
        audioText.innerHTML += audiobookData.items[i].volumeInfo.description;

        var audioFooter = document.createElement("div");
        audioFooter.setAttribute("class", "card-footer");

        var audioReadBtn = document.createElement("button");
        audioReadBtn.innerHTML += "Read More";
        audioReadBtn.setAttribute("type", "button");
        audioReadBtn.setAttribute("class", "btn btn-block");

        var audioBuyBtn = document.createElement("button");
        audioBuyBtn.innerHTML += "Add to Cart";
        audioBuyBtn.setAttribute("type", "button");
        audioBuyBtn.setAttribute("class", "btn btn-block");
        
        audioBody.append(audioTitle);
        audioBody.append(audioSub);
        audioBody.append(audioText);
        audioFooter.append(audioReadBtn);
        audioFooter.append(audioBuyBtn);
        audioCard.append(audioImage);
        audioCard.append(audioBody);
        audioCard.append(audioFooter);
        audioColumn.append(audioCard);
        audioRow.append(audioColumn);

    }; //end of for-loop
    audioDeck.append(audioRow);
}; //end of displayAudiobookCards 

<li class="nav-item mx-1 mx-sm-0"><a id="audiobook" onclick="loadJsonAudiobook()" class="nav-link" href="#">Audiobooks</a></li>

` https://jsfiddle.net/2fqygwmn/1/#&togetherjs=1pczIUhGJnhttps://jsfiddle.net/2fqygwmn/1/#&togetherjs=1pczIUhGJn

标签： javascripthtmljsonapionclick

Answer 1

大部分是错别字，就这样吧。

1. readystate 是 readyState 所以

if (yhttp.readystate === XMLHttpRequest.DONE && yhttp.status === 200) {

应该

if (yhttp.readyState === XMLHttpRequest.DONE && yhttp.status === 200) {

2. 您必须已将 i 复制并粘贴到 for 循环中，但您使用 y 作为索引变量。所以访问audiobookData.items[i]应该是audiobookData.items[y]

您的完整代码应如下所示

 function loadJsonAudiobook() {
    let yhttp = new XMLHttpRequest();
    yhttp.open("GET", "https://www.googleapis.com/books/v1/volumes?q=war+audiobooks", true);
    yhttp.send();

    yhttp.onreadystatechange = function(){
        if (yhttp.readyState === XMLHttpRequest.DONE && yhttp.status === 200) {
            let audiobookData = JSON.parse(yhttp.responseText);
            displayAudiobookCards (audiobookData);
        } // end of if
    }; // end of onreadystate
} // end of loadJsonAudiobook


// DISPLAY CARDS (audiobooks link)  
function displayAudiobookCards(audiobookData) {

    var audioDeck = document.getElementById("card2Container");

    var audioRow = document.createElement("div");
    audioRow.setAttribute("class", "row text-center");

    for (var y = 0; y < audiobookData.items.length; y++) {
        if (y === 12) {break;}
        var audioColumn = document.createElement("div");
        audioColumn.setAttribute("class", "col-md-4 pb-1 pb-md-0");

        var audioCard = document.createElement("div");
        audioCard.setAttribute("class", "card");

        var audioImage = document.createElement("img");
        audioImage.setAttribute("class", "card-img-top mx-auto d-block");
        audioImage.setAttribute("src", 
 audiobookData.items[y].volumeInfo.imageLinks.thumbnail);

        var audioBody = document.createElement("div");
        audioBody.setAttribute("class", "card-body");

         var audioTitle = document.createElement("h5");
        audioTitle.setAttribute("class", "card-title");
        audioTitle.innerHTML += audiobookData.items[y].volumeInfo.title;
    
        var audioSub = document.createElement("p");
        audioSub.setAttribute("class", "card-subtitle");
        audioSub.innerHTML += audiobookData.items[y].volumeInfo.authors;

        var audioText = document.createElement("p");
        audioText.setAttribute("class", "card-text");
        audioText.innerHTML += audiobookData.items[y].volumeInfo.description;

        var audioFooter = document.createElement("div");
        audioFooter.setAttribute("class", "card-footer");

        var audioReadBtn = document.createElement("button");
        audioReadBtn.innerHTML += "Read More";
        audioReadBtn.setAttribute("type", "button");
        audioReadBtn.setAttribute("class", "btn btn-block");

        var audioBuyBtn = document.createElement("button");
        audioBuyBtn.innerHTML += "Add to Cart";
        audioBuyBtn.setAttribute("type", "button");
        audioBuyBtn.setAttribute("class", "btn btn-block");
    
        audioBody.append(audioTitle);
        audioBody.append(audioSub);
        audioBody.append(audioText);
        audioFooter.append(audioReadBtn);
        audioFooter.append(audioBuyBtn);
        audioCard.append(audioImage);
        audioCard.append(audioBody);
        audioCard.append(audioFooter);
        audioColumn.append(audioCard);
        audioRow.append(audioColumn);

    }; //end of for-loop
    audioDeck.append(audioRow);
}; //end of displayAudiobookCards 

哦，请确保您有一个 id 为 card2Container 的元素，因此在调用 document.getElementById("card2Container")它时不会返回 null。