79
rated 0 times
[
86]
[
7]
/ answers: 1 / hits: 28744
/ 10 Years ago, fri, november 14, 2014, 12:00:00
I am trying to generate 5 random images (first row is from flicker and worked ok). On the second row it's from google, but it's only returning 4 for some reason and returning an error on the console that says:
Uncaught TypeError: Cannot read property 'url' of undefined
This is my HTML
<div class=welcomeScreen>
<form id=players>
<p>Player 1</p>
<input id=player1Name placeholder=Enter player 1's name>
<div class='player1Info clearfix'>
<label>
<img src=>
<input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
</label>
</div>
<p>Player 2</p>
<input id=player2Name placeholder=Enter player 2's name>
<div class='player2Info clearfix'>
<label>
<img src=>
<input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
</label>
<label>
<img src=>
<input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
</label>
</div>
<input value=Start the race! type=submit>
</form>
</div>
Javascript
function buildFlickrUrl(p) {
var url = https://farm;
url += p.farm;
url += .staticflickr.com/;
url += p.server;
url += /;
url += p.id;
url += _;
url += p.secret;
url += .jpg;
return url;
}
$(document).ready(function() {
var flickrUrl = https://www.flickr.com/services/rest/?
method=flickr.photos.search&format=json&api_key=
4ef070a1a5e8d5fd19faf868213c8bd0&nojsoncallback=1&text=dog
$.get(flickrUrl, function(response) {
for(var i = 0; i < 5; i++) {
var photoUrl = buildFlickrUrl(response.photos.photo[i]);
$(.player1Info label img).eq(i).attr('src', photoUrl);
$(.player1 img).eq(i).attr('src' , photoUrl);
console.log(photoUrl);
}
});
var input=cute kitten;
$.getJSON(https://ajax.googleapis.com/ajax/services/search/images?callback=?, {
q: input,
v: '1.0'
},
Thanks for all your help!
More From » jquery