We Keep Coding

How can I make sure each dynamically created image is taking on its own information/data pulled from the API?

Is there a way for me to make sure each img tag created also contains or can be linked with its individual data from the api? If only one image is returned in the search, it will give me the data for that image. However, if multiple images are returned, once clicked, it will return a only one possible image and data. I am new to coding and javascript in general, so please forgive any rookie mistakes. Thanks!
var scryfallURL = "https://api.scryfall.com/cards/search?q=";
var cardName = "";
var container = $("#list");
$("#searchBtn").on("click", function(event) {
event.preventDefault();
container.empty();
cardName = $("#search").val().trim();
queryURL = scryfallURL + cardName;
$.ajax({
url: queryURL,
method: "GET"
}).then(function(response) {
debugger;
var result = response.data;
console.log(result);
$('#search').val('');
//loops through creating an image tag for each search result
for (let index = 0; index < result.length; index++) {
var showCard = $("#list").append("<image src=' " + result[index].image_uris["normal"] + "' ></image>", "</br>");
var name = result[index].name + "<br>";
var creature = result[index].type_line + "<br>";
var flavorText = result[index].flavor_text + "<br>";
var legality = result[index].legalities + "<br>";
var cardFront = "<image src=' " + result[index].image_uris["large"] + "' ></image>" + "<br>";
};
// click function to clear the div and replace with only one card image and info
showCard.click(function() {
$("#searchForm").empty();
container.empty();
$("#info").append(name, creature, flavorText, legality);
$("#oneCard").append(cardFront);
})
});
});

Trouble getting div elements positioned at random X/Y

// T duplicates the selected element(s).
case 116:
elementSel = document.querySelectorAll("div.selected");
var elementClone,
tmp = getBrowserWidth(),
bww = tmp[0],
bwh = tmp[1];
for (i = 0; i < elementSel.length; i++) {
elementClone = elementSel[i].cloneNode(true);
elementClone.id = "boxID" + Math.floor((1 + Math.random()) * 0x10000);
elementClone.zIndex = "+1";
var posx = getRandomInt(1, bww) - elementSel[i].offsetWidth;
var posy = getRandomInt(1, bwh) - elementSel[i].offsetHeight;
elementClone.style.left = posx + " px";
elementClone.style.top = posy + " px";
elementSel[i].appendChild(elementClone);
elementSel[i].classList.toggle("selected");
console.log("Created " + elementSel.length + " elements.");
}
I am stuck doing a school assignment. I have tried to read similar questions but I do not get any further. The problem is elementClone.style.left/.top not getting assigned new values. Why?

Related answer:
It is working for me, may be the reason is you need to change the position and float attributes.

Ok, I solved it. The problem was " px". Crappé!

How do you generate a previous and next button for an array?

I have a function with this specific array in it.
var elementsArray = xmlDocument.documentElement.getElementsByTagName('track');
// console.log(elementsArray);
var arrayLength = elementsArray.length;
var output = "<table>";
for (var i=0; i < arrayLength; i++)
{
var title = elementsArray[i].getElementsByTagName('title')[0].firstChild.nodeValue;
var artist = elementsArray[i].getElementsByTagName('artist')[0].firstChild.nodeValue;
var length = elementsArray[i].getElementsByTagName('length')[0].firstChild.nodeValue;
var filename = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
console.log(title + ' ' + artist + ' ' + length + ' ' + filename);
output += "<tr>";
output += ("<td onclick='songSelect(\"" + filename + "\")'>" + title + "</td><td>" + artist + "</td>");
output += "</tr>";
}
With this array how would i generate a previous and next button to move.
http://jsfiddle.net/xbesjknL/

Once could use a linked list or even the notion of C-like pointers that point at the prev/curr/next tracks. But alas this is Javascript and the client side is too processing burdened.
So you could just build your own simplified idea of pointers in a cursor like object that is constantly pointing at the current track's index, the previous track's index and the next. And you'd call the refresh method everytime the user clicks the prev or next buttons to update the cursor's pointers accordingly.
var cursor = {
prev:(elementsArray.length-1),
curr:0,
next:(1 % (elementsArray.length-1)),
refresh: function(button){ //button is either the btnPrev or btnNext elements
if (button.getAttribute("id") === "btnPrev") {
old_curr = this.curr;
this.curr = this.prev;
if ((this.curr-1) < 0)
this.prev = elementsArray.length-1;
else
this.prev = this.curr - 1;
this.next = old_curr;
} else {
old_curr = this.curr;
this.curr = this.next;
if ((this.curr+1) > (elementsArray.length-1))
this.next= 0;
else
if (elementsArray.length === 1)
this.next = 0;
else
this.next = this.curr+1;
this.prev = old_curr;
}
}
};
// example usage:
cursor.refresh(btnPrev);
elementsArray[cursor.curr]; // gives the previous track, which is now the current track
You can even simplify this even more by just keeping track of only the current track. Note

Javascript (onclick) pop up bigger image window from image array

I have an array of images that populate the page and what I am having trouble with is coming up with a way to create an ONCLICK popup image window from the thumbnails (but the popup window needs to be a bigger size image):
here is the js code:
var str = "<table>";
var imgFolder = "images/";
var cover = new Array();
cover[0] = "kitchenHouseSale.jpg";
cover[1] = "eatLive.jpg";
cover[2] = "loveAnthonySale.jpg";
var coverone = new Array();
coverone[0] = "casualVacancy.jpg";
coverone[1] = "quiet.jpg";
coverone[2] = "whirlAway.jpg";
var covertwo = new Array();
covertwo[0] = "everyLastSale.jpg";
covertwo[1] = "neilYoung.jpg";
covertwo[2] = "soupSisters.jpg";
var title = new Array();
title[0] = "The Kitchen House";
title[1] = "Eat to Live";
title[2] = "Love Anthony";
for (var i = 0; i < cover.length; i++)
{
str += "<tr><td colspan='2'><h2>" + category[i] + "</h2></td></tr>";
str += "<tr><td class='basket'><img src='" + imgFolder + cover[i] + "' width='108' height='159'>
}
str += "</table>";
var elem = document.getElementById("table");
elem.innerHTML = str;
Any help is appreciated. Thanks!

Do i get you right? You want the user to click on an image and a bigger version of the same image is supposed to appear in a popup-window?
Have a look at window.open() then: http://w3schools.com/jsref/met_win_open.asp
You must specify the absolute path of the image - file as the url for the popup, like http://your.domain.com/images/kitchenHouseSale.jpg.
you can then add an onclick-handler to the img-tag, something like this:
<img src='" + imgFolder + cover[i] + "' width='108' height='159' onclick="window.open('http://your.domain.com + this.src)" />

Problem with "document.write()" an Image Array in JavaScript

Am trying to write using document.write() an image at the time from my array. However it does not display any...
// *** Temporal variables
var i = 0;
var j = 0;
var x = 0;
// Create basic linear array
var ImgArray = []
// Do the 2D array for each or the linear array slots
for (i=0; i < 4 ; i++) {
ImgArray[i] = []
}
// Load the images
x = 0;
for(i=0; i < 4 ; i++) {
for(j=0; j < 4 ; j++) {
ImgArray[i][j] = new Image();
ImgArray[i][j] = "Images/" + x + ".jpg";
document.write("<img id= " + x + " img src=ImgArray[i][j] width='120' height='120'/>");
x = x + 1;
}
document.write("<br>");
}
What am I doing wrong?

Looks like your JavaScript isn't quite right...
document.write('<img id="' + x + '" src="' + ImgArray[i][j] + '" width="120" height="120"/>');

It looks like you're trying to do image preloading by using new Image(), but then you immediately write out an image element with the same src using document.write(), so the image will not have preloaded and you get no benefit. I also suspect you're missing a .src on one line in the inner loop:
ImgArray[i][j].src = "Images/" + x + ".jpg";
This looping to create image elements would be best done server-side when generating the HTML, but assuming that's not an option, you could lose the ImgArray variable completely:
x = 0;
for(i=0; i < 4; i++) {
for(j=0; j < 4; j++) {
document.write("<img id='" + x + "' src='Images/" + x + ".jpg' width='120' height='120'>");
x = x + 1;
}
document.write("<br>");
}

document.write writes any input the the location of script element. Try this instead:
in body
<div id="imageContainer"></div>
in your script, gather all output to a variable, say contentVariable, and then
document.getElementById("imageContainer").innerHTML = contentVariable;
note:
It's bad practice to use document.write and even innertml for appending elements to dom. use document.createElement and element.appendChild for dom manupilation.