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
这里主要是错别字。
- 就绪状态就是就绪状态所以
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")
它不会 return null。
因此,我正在尝试让 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>
这里主要是错别字。
- 就绪状态就是就绪状态所以
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")
它不会 return null。