onClick 和 addEventListner?没有任何作用

onClick and addEventListner? nothing works

因此,我正在尝试让 javascript(通过 json api)创建的一副纸牌在 link“有声读物”出现时显示点击。但它不起作用。我已经尝试在调用函数的 a-tagg 中单击 onclick,尝试反转它并调用 a-tagg 并应用 eventListner ...我在这里做错了什么?我在网上寻找解决方案,但现在卡住了。

Link 精简 fiddle: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

这里主要是错别字。

  1. 就绪状态就是就绪状态所以

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

应该是

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

  1. 您必须将 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") 它不会 return null。