onClick 和 addEventListner？没有任何作用答案

【问题标题】：onClick and addEventListner? nothing worksonClick 和 addEventListner？没有任何作用
【发布时间】：2020-08-18 15:53:51
【问题描述】：

所以，我试图在单击“有声读物”链接时显示使用 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

&lt;li class="nav-item mx-1 mx-sm-0"&gt;&lt;a id="audiobook" onclick="loadJsonAudiobook()" class="nav-link" href="#"&gt;Audiobooks&lt;/a&gt;&lt;/li&gt;

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

【问题讨论】：

欢迎来到 Stack Overflow！ SO 的工作方式，您的整个问题（包括任何必要的代码）必须in 您的问题，而不仅仅是链接。两个原因：人们不应该去场外帮助你；和链接腐烂，使问题及其答案对未来的人们毫无用处。请在问题中输入minimal reproducible example in。更多：How do I ask a good question? 和 Something in my web site or project doesn't work. Can I just paste a link to it?
您可以使用 Stack Snippets（[<>] 工具栏按钮）制作可运行的现场示例； here's how to do one.
一些较旧的问题在添加 sn-p 之前有小提琴链接，但对于新问题，请按照@T.J.Crowder 的建议在此处重现问题！
@MarkSchultheiss - 甚至带有小提琴链接的旧问题应该在问题本身中包含所有代码，即使它们也链接到小提琴. （还有 SherardiaAvensis - 这样做仍然可以，尽管 Snippets 可以更轻松地帮助您。关键是代码在问题中。）
@T.J.Crowder 感谢您对我的评论的澄清:)

标签： javascript html json api onclick

【解决方案1】：

大部分是错别字，这里是。

readystate 就是 readyState 所以

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

应该是

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

您必须已将 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。

【讨论】：

哇……哇。这很尴尬。哈哈！有时你只需要一双新的眼睛，min显然没有在这里做他们的工作。非常感谢！你是一颗宝石！（是的，我已经从 js 的另一部分复制了 for 循环，并且我确实有一个带有 id card2Container 的 div-tagg，我只是忘了把它放在帖子中）