如何添加指向API结果的链接
如何添加指向API结果的链接
提问于 2019-03-25 02:37:39
我已经创建了一个从API (picsum.photos)中随机抽取图片的图库，请在这里查看：https://codepen.io/lucas-knm/pen/oVmmEV
问题是这两个链接是不可点击的。我需要用文本或图标更改它们，并将它们链接到新页面中的实际地址。
我尝试了这段代码，但显然不起作用：
下面是完整的Js代码：
window.onload = init;
function init(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://picsum.photos/list", true);
xhr.send(null);
xhr.onload = function(){
if (xhr.status == 200) {
var picsum = JSON.parse(xhr.responseText)
console.log(picsum);
var imageString = "";
for(var x = 500; x <510; x++){
imageString += "<div class = imgContainer>" + "<p class = author>" +
picsum[x].author
+
"</p>"
+
"<img src= 'https://picsum.photos/200/300?image='>"
+
"<p class = authorUrl>"
+
picsum[x].author_url
+
"</p><p class = postUrl>"
+
picsum[x].post_url
+
"</p>"
+
"</div>"
}
document.getElementById("gallery").innerHTML = imageString;
gallery.setAttribute('style', 'font-size: 12px; text-align: left; display:absolute;');
}
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-25 02:46:11
您必须创建<a>标记并将URL设置为它们的href属性，而不是以文本格式编写URL：
window.onload = init;
function init(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://picsum.photos/list", true);
xhr.send(null);
xhr.onload = function(){
if (xhr.status == 200) {
var picsum = JSON.parse(xhr.responseText)
console.log(picsum);
var imageString = "";
for(var x = 500; x <510; x++){
imageString += "<div class = imgContainer>" + "<p class = author>" +
picsum[x].author
+
"</p>"
+
"<img src= 'https://picsum.photos/200/300?image='>"
+
"<p class = authorUrl>"
+
//This is what you need:
"<a href='" + picsum[x].author_url + "'>"+ picsum[x].author_url +"</a>";
+
"</p><p class = postUrl>"
+
"<a href='" + picsum[x].post_url + "'>"+ picsum[x].post_url +"</a>"
+
"</p>"
+
"</div>"
}
document.getElementById("gallery").innerHTML = imageString;
gallery.setAttribute('style', 'font-size: 12px; text-align: left; display:absolute;');
}
}
}Stack Overflow用户
发布于 2019-03-25 02:49:49
只需将链接封装在<a>标记中：
window.onload = init;
function init() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://picsum.photos/list", true);
xhr.send(null);
xhr.onload = function() {
if (xhr.status == 200) {
var picsum = JSON.parse(xhr.responseText);
console.log(picsum);
var imageString = "";
for (var x = 500; x < 510; x++) {
imageString +=
"<div class = 'imgContainer'>" +
"<p class = 'author'>" +
picsum[x].author +
"</p>" +
"<img src= 'https://picsum.photos/200/300?image='>" +
"<p class = 'authorUrl'><a href=" +
picsum[x].author_url +
" target='_blank'>" +
picsum[x].author_url +
"</a></p><p class = 'postUrl'><a href=" +
picsum[x].post_url +
" target='_blank'>" +
picsum[x].post_url +
"</p>" +
"</div>";
}
document.getElementById("gallery").innerHTML = imageString;
gallery.setAttribute(
"style",
"font-size: 12px; text-align: left; display:absolute;"
);
}
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55327181
复制相关文章
相似问题