Alright, so I'm trying to make a Chrome extension. I'm quite a bit of a noob at this, which is why I've started off by taking an example extension from a tutorial site and adding stuff to it. I got it off some site which I can't remember, if you really want attribution, I can have a search for it. Code:
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello_world&" +
"safe_search=1&" +
"content_type=1&" +
"sort=relevance&" +
"per_page=24",
true);
req.onload = showPhotos;
req.send(null);
function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.getElementById("images").appendChild(img);
}
}
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
So anyway, what the extension does is it sends an XMLHttpRequest to Flickr's API, getting some images (img tags in XML format). It then loops through those tags with a for loop, and for every tag it makes a new img element using createElement(), gives it a src attribute using the constructImageURL() function and appends it to the popup page. What I wanted to do is make it so you can actually click on those images, and be taken to the image's page. I tried to make a snippet of code based on the one that creates the image elements, but to create anchor (a) elements, which I added to the for loop. It looks like this:
var a = document.createElement("link");
a.href = constructImageURL(photo);
a.target = "_blank";
document.getElementById("images").appendChild(a);
and I then added some code to append the img elements to the anchor elements, effectively making a <a><img /></a>
structure:
document.a.appendChild(img);
But, it doesn't work. Can someone please help?
Well, you should check the developer tools console by right-clicking the browser action and clicking "Inspect popup" and see what's wrong.
I think you might want to use setAttribute
, just to make sure. And the element for a link is <a>
not <link>
, as well as the element for an image is <img>
not <image>
. Also, you don't want document.a.appendChild
, you want to append the image to the current variable. So it should be something like:
function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");
var a = document.createElement("a");
a.setAttribute("href",constructImageURL(photo));
a.setAttribute("target","_blank");
var img = document.createElement("img");
img.setAttribute("src",constructImageURL(photo));
a.appendChild(img);
document.getElementById("images").appendChild(a);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.