I am making a gif generator, the goal being to dynamically create clickable buttons that will then dynamically add 10 gifs from the search term to the page. On click is returning the console log, but will not add divs with gif images and rating to the page.
HTML
<form id="killer-form">
<label for="killer-input">Add a serial killer:</label>
<input type="text" id="killer-input"><br>
<input id="killer-add-submit" type="submit" value="Submit">
</form>
<div id="append-img-div"></div>
JS
var killersGifs = {
killerSearches: ["Freddy", "Jason", "Pennywise", "Ghost Face", "American Mary", "Chucky", "Bride of Chucky", "Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Meyers", "Norman Bates", "Pinhead"],
buttonLoop: function() {
for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
$("#buttons").append(buttonM);
}
},
divLoop: function(event) {
for (var i = 0; i < killersGifs.killerSearches.length - 1; i++) {
//console.log(this.killerSearches[i]);
//var newDiv = $("<div class='gif-div'>");
var killer = killersGifs.killerSearches[i];
var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + killer + "&limit=10"
//console.log(queryURL);
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
console.log(response);
for (var x = 0; x < response.length - 1; x++) {
var respData = response[x].data;
var image = respData.images.fixed_height_small_still.url;
var rating = respData.rating;
var dynDiv = $("<div class='dyn-div'>");
var killerImg = $("<img>");
killerImg.attr("src", image);
killerImg.attr("alt", "Serial Killer still frame of gif");
dynDiv.append("Rating: " + rating);
dynDiv.append(image);
$("#append-img-div").prepend(dynDiv);
};
});
};
},
userPush: function () {
var userInput = $("input[type='text']").val().trim();
console.log(userInput);
killersGifs.killerSearches.push(userInput);
var buttonU = $("<button class='dynGen'>").text(userInput).attr("data-index", userInput);
$("#buttons").append(buttonU);
console.log(killersGifs.killerSearches);
}
};
killersGifs.buttonLoop();
$("#killer-add-submit").on("click", function(event) {
event.preventDefault();
killersGifs.userPush();
});
$(document).on("click", "button.dynGen", function(event) {
event.preventDefault();
$("#append-img-div").empty();
killersGifs.divLoop(event);
});
Clicking a button should return 10 images (still gifs) related to that word.
The console.log runs on click, but it is console logging an array of 10 for all 13 words as opposed to one array for the word clicked on.
response is an Object.
response.length is an undefined.
response.data is an Array.
If you want image also, Then you should append killerImg also.
var killersGifs = {
killerSearches: ["Freddy", "Jason", "Pennywise", "Ghost Face", "American Mary", "Chucky", "Bride of Chucky", "Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Meyers", "Norman Bates", "Pinhead"],
buttonLoop: function() {
for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
$("#buttons").append(buttonM);
}
},
divLoop: function(event) {
for (var i = 0; i < killersGifs.killerSearches.length - 1; i++) {
//console.log(this.killerSearches[i]);
//var newDiv = $("<div class='gif-div'>");
var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + killer + "&limit=10"
var killer = killersGifs.killerSearches[i];
//console.log(queryURL);
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
// console.log(response.data.length);
for (var x = 0; x < response.data.length - 1; x++) {
var respData = response.data[x];
var image = respData.images.fixed_height_small_still.url;
var rating = respData.rating;
var dynDiv = $("<div class='dyn-div'></div>");
var killerImg = $("<img>");
killerImg.attr("src", image);
killerImg.attr("alt", "Serial Killer still frame of gif");
dynDiv.append("Rating: " + rating);
dynDiv.append(image);
$("#append-img-div").prepend($(dynDiv).append($(killerImg)));
};
});
};
},
userPush: function() {
var userInput = $("input[type='text']").val().trim();
console.log(userInput);
killersGifs.killerSearches.push(userInput);
console.log(killersGifs.killerSearches);
}
};
killersGifs.buttonLoop();
$("#killer-add-submit").on("click", function(event) {
event.preventDefault();
killersGifs.userPush();
});
$(document).on("click", "button.dynGen", function(event) {
event.preventDefault();
$("#append-img-div").empty();
killersGifs.divLoop(event);
});
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<div id="buttons"></div>
<form id="killer-form">
<label for="killer-input">Add a serial killer:</label>
<input type="text" id="killer-input"><br>
<input id="killer-add-submit" type="submit" value="Submit">
</form>
<div id="append-img-div"></div>
Related
I am trying to write an html with JS program that will convert an excel file into json which is does bit it does not format it the way I need to. So basically it spits out when finished
[
{
"imei": "357271093291264"
},
{
"imei": "353094106032150"
},
{
"imei": "353112106434588"
}
]
but what I need is.
[
{
"imei": "357271093291264", "353094106032150", "353112106434588"
}
]
So it is taking imei from cell A1 and using it over and over. I just need it
to keep adding on as I go down the rows.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/read-excel-file#4.x/bundle/read-excel-file.min.js"></script>
</head>
<body>
<div style="margin: auto;width: 50;margin-top: 80px;padding: 30px;background-color: #dedede;">
<h2>Excel to JSON Converter</h2>
<input type="file" id="input" />
<br> <br>
<textarea name="json-data" id="json-data" rows="25" style="width: 100%;"></textarea>
<br><br>
<button id="dl-json">Download JSON File</button>
</div>
<script>
var input = document.getElementById('input');
input.addEventListener('change', function(){
readXlsxFile(input.files[0]).then(function(data){
var i = 0;
var headers = [];
var json_object = [];
data.map((row, index)=> {
if (i == 0){
headers = row;
}
if (i > 0){
var temp = {};
for (var x = 0; x < row.length; x++){
temp[headers[x]] = row[x];
}
json_object.push(temp);
}
i++;
});
document.getElementById('json-data').value = JSON.stringify(json_object, null, 2)
});
document.getElementById('dl-json').onclick = function() {
var json_str = document.getElementById('json-data').value;
downloadObjectAsJson(json_str, '');
}
function downloadObjectAsJson(str, filename){
var data_str = "data:text/json;charset=utf-8," + encodeURIComponent(str);
var anchor = document.createElement('a');
anchor.setAttribute("href", data_str);
anchor.setAttribute("download", filename + ".json");
}
});
</script>
</body>
</html>
I have tried playing around with it and pulling out certain parts and setting different variables to certain values.
The shape of your output doesn't seem to make sense. Do you want the first element in your output array to be a key:value pair such as "headerText":"row2Value", and then the rest just strings?
If so, this should work for you:
var input = document.getElementById("input");
input.addEventListener("change", function () {
readXlsxFile(input.files[0]).then(function (data) {
let exportData = [];
for (i = 1; i < data.length; i++) {
i === 1
? exportData.push({ imei: data[i].toString() })
: exportData.push(data[i].toString());
}
document.getElementById("json-data").value = JSON.stringify(exportData);
});
document.getElementById("dl-json").onclick = function () {
var json_str = document.getElementById("json-data").value;
downloadObjectAsJson(json_str, "");
};
function downloadObjectAsJson(str, filename) {
var data_str =
"data:text/json;charset=utf-8," + encodeURIComponent(str);
var anchor = document.createElement("a");
anchor.setAttribute("href", data_str);
anchor.setAttribute("download", filename + ".json");
}
});
If you only need the key, then an array of values, this will work better for you:
readXlsxFile(input.files[0]).then(function (data) {
let exportData = [];
for (i = 1; i < data.length; i++) {
exportData.push(data[i].toString());
}
document.getElementById("json-data").value = JSON.stringify({
imei: exportData,
});
});
::UPDATED CODE::
I have dynamically generated buttons from an array. When a button is clicked, 10 still images of gifs append to the page from an API call. When clicking on one of the dynamically generated still images, I need the animated gif to display. Upon clicking again, I need the still image to show and the animated gif to hide.
lastClick = [];
var killersGifs = {
killerSearches: ["Freddy Krueger", "Jason Voorhees", "Pennywise", "Ghostface", "American Mary", "Chucky", "Bride of Chucky", "The Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Myers", "Norman Bates", "Pinhead"],
buttonLoop: function() {
for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
$("#buttons").append(buttonM);
}
},
divLoop: function(click) {
var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + lastClick + "&limit=10"
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
console.log(response.data);
for (var i = 0; i < response.data.length; i++) {
var respData = response.data[i];
var image = respData.images.fixed_height_small_still.url;
var gif = respData.images.fixed_height_small.url;
var rating = respData.rating;
var dynDiv = $("<div class='dyn-div'>");
//dynDiv.attr("data-index", i);
var killerImg = $("<img class='still-image'>");
killerImg.attr("src", image);
killerImg.attr("alt", "Serial Killer still frame of gif");
killerImg.attr("data-gif", gif);
killerImg.attr("class", "killerImg");
killerImg.attr("data-index", i);
dynDiv.append("<p> Rating: " + rating + "</p>");
dynDiv.append(killerImg);
$("#append-img-div").prepend($(dynDiv));
};
});
},
userPush: function () {
var userInput = $("input[type='text']").val().trim();
console.log(userInput);
killersGifs.killerSearches.push(userInput);
var buttonU = $("<button class='dynGen'>").text(userInput).attr("data-index", userInput);
$("#buttons").append(buttonU);
console.log(killersGifs.killerSearches);
}
};
killersGifs.buttonLoop();
$("#killer-add-submit").on("click", function(event) {
event.preventDefault();
killersGifs.userPush();
});
$(document).on("click", "button.dynGen", function(event) {
var currentIndex = $(this).attr("data-index");
lastClick.push(currentIndex);
console.log(currentIndex);
event.preventDefault();
$("#append-img-div").empty();
killersGifs.divLoop();
lastClick = [];
});
$(document).on("click", ".killerImg", function(event) {
console.log("test");
var currentIn = $(this).attr("data-index");
var tempUrl = $(this).attr("data-gif");
console.log(currentIn);
console.log(tempUrl);
});
On click, the clicked image should toggle between still image and animated gif.
Click function console logs index and correct gif URL of clicked image. I am not sure how to incorperate that to swap the gif and image on click.
I think you need to set the gif url as a property of the img element you are creating with jQuery. Something like:
`killerImg.attr("data-gif", gif);`
seeing as you already defined
var gif = respData.images.fixed_height_small.url;. You may also want to give it a unique id like:
killerImg.attr("id", "killer-img");
Then, in your on click event you can retrieve that attribute from the element itself:
var tempUrl = $("#killer-img").attr("data-gif");
and switch it out with the img src with:
$("#killer-img").attr("data-gif") = $("#killer-img").attr("src");
and finally:
$("#killer-img").attr("src") = tempUrl to set the image source to the moving gif.
I recently tackled a very similar assignment myself. Hope this helps!
lastClick = [];
var killersGifs = {
killerSearches: ["Freddy Krueger", "Jason Voorhees", "Pennywise", "Ghostface", "American Mary", "Chucky", "Bride of Chucky", "The Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Myers", "Norman Bates", "Pinhead"],
buttonLoop: function() {
for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
$("#buttons").append(buttonM);
}
},
divLoop: function(click) {
var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + lastClick + "&limit=10"
$.ajax({
url: queryURL,
method: "GET"
}).done(function(response) {
console.log(response.data);
for (var i = 0; i < response.data.length; i++) {
var respData = response.data[i];
var image = respData.images.fixed_height_still.url;
var gif = respData.images.fixed_height.url;
var rating = respData.rating;
var dynDiv = $("<div class='dyn-div'>");
//dynDiv.attr("data-index", i);
var killerImg = $("<img class='still-image'>");
killerImg.attr("src", image);
killerImg.attr("alt", "Serial Killer still frame of gif");
killerImg.attr("data-gif", gif);
killerImg.attr("class", "killerImg");
killerImg.attr("data-index", i);
killerImg.attr("data-img", image);
dynDiv.append("<p> Rating: " + rating + "</p>");
dynDiv.append(killerImg);
$("#append-img-div").prepend($(dynDiv));
};
});
},
userPush: function () {
var userInput = $("input[type='text']").val().trim();
killersGifs.killerSearches.push(userInput);
var buttonU = $("<button class='dynGen'>").text(userInput).attr("data-index", userInput);
$("#buttons").append(buttonU);
console.log(killersGifs.killerSearches);
}
};
killersGifs.buttonLoop();
$("#killer-add-submit").on("click", function(event) {
event.preventDefault();
killersGifs.userPush();
});
$(document).on("click", "button.dynGen", function(event) {
var currentIndex = $(this).attr("data-index");
lastClick.push(currentIndex);
console.log(currentIndex);
event.preventDefault();
$("#append-img-div").empty();
killersGifs.divLoop();
lastClick = [];
});
$(document).on("click", ".killerImg", function(event) {
console.log("test");
//killersGifs.animateGif();
var currentIn = $(this).attr("data-index");
var tempUrl = $(this).attr("data-gif");
var tempUrl2 = $(this).attr("data-img");
console.log(currentIn);
console.log(tempUrl);
if ($(this).attr("src") == tempUrl2) {
$(this).attr("src", tempUrl);
}
else if ($(this).attr("src") == tempUrl) {
$(this).attr("src", tempUrl2);
};
});
I have a program which stores images and their names in an array. The names are displayed in a list, the corresponding image is displayed on click
I also want to count the clicks on the image once it is displayed. At a later point per image, right now I am just trying to count total clicks.
The code below does not display the clicks in the Console, I do not get any error.
Is it not possible to nest two immediately invoked functions like this?
for (var i = 0; i < cats.length; i++) {
//Building the list . Creating a list item and textnode. The textnode reads out the catnames. Append the textnode to the list. Append all of it to the catlist in the HTML
var catitem = document.createElement("LI");
var textnode = document.createTextNode(cats[i].id);
catitem.appendChild(textnode);
document.getElementById("catlist").appendChild(catitem);
//Adding the catname to the div
var currentcat = cats[i].id;
var currentimage = cats[i].img;
catitem.addEventListener('click', (function(currentimage_copy) {
return function() {
var clicks = 0;
var x = document.createElement("IMG");
x.setAttribute("src", currentimage_copy);
var item = document.getElementById("catimage");
var y = document.getElementById("catimage").childNodes[0];
item.replaceChild(x, y);
x.setAttribute("onclick", (function countClicks(clickscopy) {
return function countClicks() {
clicks++;
console.log(clickscopy);
};
})(clicks));
Here is the full code
<!DOCTYPE html>
<html>
<body>
<title>||Cats||</title>
</head>
<body>
<h1>This is the list of cats<h1>
<h2>Click the cat to see an image of the cat</h2>
<ul id="catlist">
</ul>
<div id="catimage">
</div>
<div id="catname"></div>
<div id="current"></div>
<script>
document.body.onload = addElement;
function addElement() {
var cats = [{
img: "cat.jpg",
id: "cleo"
},
{
img: "shimi.png",
id: "shimi"
},
{
img: "miezi.png",
id: "miezi"
},
{
img: "tom.jpg",
id: "tom"
},
{
img: "chrissie.jpg",
id: "chrissie"
}
];
for (var i = 0; i < cats.length; i++) {
//Building the list . Creating a list item and textnode. The textnode reads out the catnames. Append the textnode to the list. Append all of it to the catlist in the HTML
var catitem = document.createElement("LI");
var textnode = document.createTextNode(cats[i].id);
catitem.appendChild(textnode);
document.getElementById("catlist").appendChild(catitem);
//Adding the catname to the div
var currentcat = cats[i].id;
var currentimage = cats[i].img;
catitem.addEventListener('click', (function(currentimage_copy) {
return function() {
var clicks = 0;
var x = document.createElement("IMG");
x.setAttribute("src", currentimage_copy);
var item = document.getElementById("catimage");
var y = document.getElementById("catimage").childNodes[0];
item.replaceChild(x, y);
x.setAttribute("onclick", (function countClicks(clickscopy) {
return function countClicks() {
clicks++;
console.log(clickscopy);
};
})(clicks));
};
})(currentimage));
}
}
</script>
</body>
</html>
Use addEventListener instead of setAttribute
Try this:
var cats = [{
id: 1,
img: 'https://jsfiddle.net/img/logo.png'
}, {
id: 2,
img: 'https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
}, ]
for (var i = 0; i < cats.length; i++) {
//Building the list . Creating a list item and textnode. The textnode reads out the catnames. Append the textnode to the list. Append all of it to the catlist in the HTML
var catitem = document.createElement("LI");
var textnode = document.createTextNode(cats[i].id);
catitem.appendChild(textnode);
document.getElementById("catlist").appendChild(catitem);
//Adding the catname to the div
var currentcat = cats[i].id;
var currentimage = cats[i].img;
catitem.addEventListener('click', (function(currentimage_copy) {
return function() {
var clicks = 0;
var x = document.createElement("IMG");
x.setAttribute("src", currentimage_copy);
var item = document.getElementById("catimage");
var y = document.getElementById("catimage").childNodes[0];
item.replaceChild(x, y);
x.addEventListener("click", (function countClicks(clickscopy) {
return function countClicks() {
clickscopy++;
console.log(clickscopy);
};
})(clicks));
}
})(currentimage))
}
<ul id='catlist'></ul>
<div id='catimage'>
<img src="" alt="">
</div>
I am having a dynamic form which creates fields dynamically by pressing "+" button.
This form is not binded in the document but generated when we click the + button.
I need to access the form values, how do I achieve that.
what should I use form "get" or "post" .
I have tried by using formdata object or jQuery serialize() but with no success or actually I couldn't figure out a way how to use it correctly .
JSFIDDLE LINK :
code:
HTML :
<body>
<div id="main1">
<input type="button" onclick="addSelectBox ()" name="clickme" value="+" />
<input type="button" onclick="removeSelect();" value="-" />
<input type="button" onclick="xmlData();" value="XML" />
</div>
<form id="autoPopulation_form" method='post'>
<div id="main"></div>
<input type="submit" />
</form>
</body>
JS :
var selele = 0;
var brindex = 0;
function addSelectBox() {
selele = selele + 1;
var spantag = document.createElement("span");
spantag.setAttribute("id", selele);
var parentDiv = document.getElementById("main");
var selectElement = document.createElement("select");
var selectElement1 = document.createElement("select");
var selectElement2 = document.createElement("select");
var selectElement3 = document.createElement("select");
var textbox = document.createElement('input');
textbox.setAttribute("name", "text" + selele);
var arr = new Array("Stocks", "MutualFunds");
var arr2 = new Array("individual", "401k", "IRA");
var arr3 = new Array("contains", "equals");
var arr4 = new Array("scrapedaccounttype", "scrapedtransactiontype");
for (var i = 0; i < arr.length; i++) {
var option = new Option(arr[i]);
selectElement.options[selectElement.options.length] = option;
selectElement.setAttribute("name", "tag" + selele);
}
for (var i = 0; i < arr2.length; i++) {
var option = new Option(arr2[i]);
selectElement1.options[selectElement1.options.length] = option;
selectElement1.setAttribute("name", "acctType" + selele);
}
for (var i = 0; i < arr3.length; i++) {
var option = new Option(arr3[i]);
selectElement2.options[selectElement2.options.length] = option;
selectElement2.setAttribute("name", "compare" + selele);
}
for (var i = 0; i < arr4.length; i++) {
var option = new Option(arr4[i]);
selectElement3.options[selectElement3.options.length] = option;
selectElement3.setAttribute("name", "match_name" + selele);
}
spantag.appendChild(selectElement);
spantag.appendChild(selectElement1);
spantag.appendChild(selectElement2);
spantag.appendChild(selectElement3);
spantag.appendChild(textbox);
parentDiv.appendChild(spantag);
linebreak();
};
function removeSelect() {
var parentDiv = document.getElementById("main");
var removetg = document.getElementById(selele);
if (selele != 1) {
parentDiv.removeChild(removetg);
selele = selele - 1;
} else {
parentDiv.removeChild(removetg);
parentDiv.innerHTML = "";
selele = selele - 1;
}
removeBreak();
};
function linebreak() {
brindex = brindex + 1;
var brtag = document.createElement("br");
brtag.setAttribute("id", brindex);
var parentDiv = document.getElementById("main");
parentDiv.appendChild(brtag);
};
function linespace() {
var myElement = document.createElement("span");
myElement.innerHTML = "           ";
var parentDiv = document.getElementById("main");
parentDiv.appendChild(myElement);
};
function removeBreak() {
var myElement = document.getElementById(brindex);
var parentDiv = document.getElementById("main");
brindex = brindex - 1;
parentDiv.removeChild(myElement);
};
function xmlData() {
xmlDoc = loadXMLDoc("data.xml");
newel = xmlDoc.createElement("edition");
x = xmlDoc.getElementsByTagName("span")[0];
x.appendChild(newel);
};
window.onload = function () {
$( "autoPopulation_form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
};
You are going to find this funny, but your code is fine exept that your selector is wrong when serializing. You forgot the # because you are selecting an ID. Check your updated Fiddle here: http://jsfiddle.net/veritas87/3542N/8/
window.onload = function () {
$( "#autoPopulation_form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
};
I'm going to take a guess here that you are trying to access them from within Javascript.
If that is the case, the easiest way to give the elements a unique id.
var selectElement = document.createElement("select");
selectElement.id = "select_0";
var selectElement1 = document.createElement("select");
selectElement1.id = "select_1";
var selectElement2 = document.createElement("select");
selectElement1.id = "select_2";
var selectElement3 = document.createElement("select");
selectElement1.id = "select_3";
var desiredSelect = document.getElementById("select_3");
You can also give them a name property, in which case you can access them through the form element, or document.getElementsByName. Just be aware the second one will return an array of items, or null.
Line 35, just before the alert, returns -1. I also tried $(this).index() with the same result. Here is what it should do: Clicking EN.gif should return 4, then grand_array_pics[4] should give me en_array_pics and load the .gifs in that array.
$(document).ready(function () {
var main_pics = ["AN.gif", "BN.gif", "CN.gif", "DN.gif", "EN.gif", "GN.gif"];
var starting_pics = ["AN.gif", "CN.gif", "EN.gif"];
var an_array_pics = ["BN.gif", "EN.gif", "GN.gif", "AN.gif","DN.gif"];
var bn_array_pics = ["CN.gif", "DN.gif", "GN.gif"];
var cn_array_pics = ["DN.gif", "GN.gif", "AN.gif", "CN.gif"];
var dn_array_pics = ["EN.gif", "AN.gif", "CN.gif"];
var en_array_pics = ["GN.gif", "AN.gif", "CN.gif", "EN.gif"];
var gn_array_pics = ["AN.gif", "CN.gif", "EN.gif", "GN.gif"];
var grand_array_pics = [
an_array_pics,
bn_array_pics,
cn_array_pics,
dn_array_pics,
en_array_pics,
gn_array_pics
];
var i = 0;
for (i = 0; i < starting_pics.length; i++) {
$("<img/>").attr("src", "images/" + starting_pics[i]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
$("#main").on("click", ".pics", function () {
var j = $.inArray(this, main_pics);
alert(j);
$("#sidebar .pics").remove();
$(this).clone().appendTo("#train");
$(this).clone().appendTo("#sidebar");
$("#main .pics").remove();
var chosen_pics_array = grand_array_pics[j];
var count = chosen_pics_array.length;
var k = 0;
for (k = 0; k < count; k++) {
$("<img/>").attr("src", "images/" + chosen_pics_array[k]).load(function () {
$(this).appendTo("#main");
$(this).addClass("pics");
});
}
});
}); //end ready
this is the DOM <img> element, while main_pics is an array of strings. It will never be found inside there. Use
var j = $.inArray(this.src.split("/").pop(), main_pics);
Give this a try. You need to get the name of the file and you're passing the element itself into $.inArray
var j = $.inArray(this.src.substring(this.src.lastIndexOf('/')+1), main_pics);