I have a script, the goal of which is to sort a list of entire div classes (containing images) in ascending order as determined by a number within that div class. It has to work at the push of a button. It works relatively well, except it keeps sorting the items by the first digit rather than the number as a whole (resulting in an arrangement like 1, 10, 11, 2, 3, etc.)
My entire code is below, please show me how to fix this.
NOTE: I am looking for any possible solution but if it's possible to keep the script close to its current form I would prefer that
CSS:
.number{
display:block;
color:black;
font-size:30px;
margin:20px
}
HTML:
<div id="sortingbutton">
<button>Sorting Button</button>
</div>
</div>
<ul id="list">
<li>
<div class="number">5</div>
<img src="http://i.imgur.com/b70bLk1.png" width="250px" height="250px" alt="aqua" />
</li>
<li>
<div class="number">4</div>
<img src="http://i.imgur.com/keE5Thi.png" width="250px" height="250px" alt="tan" />
</li>
<li>
<div class="number">1</div>
<img src="http://i.imgur.com/EgqCTZJ.png" width="250px" height="250px" alt="black" />
</li>
<li>
<div class="number">3</div>
<img src="http://i.imgur.com/4onkGsz.png" width="250px" height="250px" alt="grey" />
</li>
<li>
<div class="number">9</div>
<img src="http://i.imgur.com/To88ZFN.png" width="250px" height="250px" alt="orange" />
</li>
<li>
<div class="number">2</div>
<img src="http://i.imgur.com/6ZtB1VW.png" width="250px" height="250px" alt="purple" />
</li>
<li>
<div class="number">6</div>
<img src="http://i.imgur.com/5Pz2Q2Y.png" width="250px" height="250px" alt="yellow" />
</li>
<li>
<div class="number">7</div>
<img src="http://i.imgur.com/VqAdV1K.png" width="250px" height="250px" alt="blue" />
</li>
<li>
<div class="number">8</div>
<img src="http://i.imgur.com/4HCxTpm.png" width="250px" height="250px" alt="green" />
</li>
<li>
<div class="number">10</div>
<img src="http://i.imgur.com/JjjHmM0.png" width="250px" height="250px" alt="pink" />
</li>
<li>
<div class="number">11</div>
<img src="http://i.imgur.com/EpB8YgU.png" width="250px" height="250px" alt="Red" />
</li>
</ul>
Javascript:
window.onload = function () {
var desc = false;
document.getElementById("sortingbutton").onclick = function () {
sortUnorderedList("list", desc);
desc = !desc;
return false;
}
}
function compareText(a1, a2) {
var t1 = a1.innerText,
t2 = a2.innerText;
return t1 > t2 ? 1 : (t1 < t2 ? -1 : 0);
}
function sortUnorderedList(ul, sortDescending) {
if (typeof ul == "string") {
ul = document.getElementById(ul);
}
var lis = ul.getElementsByTagName("LI");
var vals = [];
for (var i = 0, l = lis.length; i < l; i++) {
vals.push(lis[i]);
}
vals.sort(compareText);
if (sortDescending) {
vals.reverse();
}
ul.innerHTML = '';
for (var i = 0, l = vals.length; i < l; i++) {
ul.appendChild(vals[i]);
}
}
Why not just use a1.innerText - a2.innerText in compareText?
Explanation
When you compare two strings using less and greater than symbols javascript doesn't convert them to integers, as javascript can compare two strings, no problem. For example "10" > "2" returns true, cause "10" is longer.
However when you use subtraction operator javascript can't subtract strings so it converts it into integers.
Use parseInt to convert string variables into integers.
http://www.w3schools.com/jsref/jsref_parseint.asp
Sorting by first digit is string sorting.
for (var i = 0, l = lis.length; i < l; i++) {
vals.push(parseInt(lis[i], 10));
}
Related
Brand new to web development.
I was following this tutorial: https://www.youtube.com/watch?v=cVyhH3t49fs
Having trouble getting the at the end of index.html to function properly, despite having copied it exactly (my 'images' folder is called 'imgs' instead). Specifically, nothing happens when I click on the numbered buttons to swap images in the gallery.
Project files: https://drive.google.com/drive/folders/1R32WhB-oWDybyNZ3NtAVRMp370QKXJiX?usp=sharing
<div class="container">
<div class="navbar">
<img src="./imgs/logo.png" class="logo" />
<nav>
<ul>
<li>Home</li>
<li>Office</li>
<li>Hotels</li>
<li>Contact Us</li>
</ul>
</nav>
<img src="./imgs/menu.png" class="menu-icon" />
</div>
<div class="row">
<div class="col">
<div class="text-box">
<h5>Our Products</h5>
<h1>
<b>Simplicity</b> <br />
is the <b>ultimate</b> sophistication
</h1>
</div>
<img src="./imgs/circle.png" class="small-icon1" />
<img src="./imgs/circle.png" class="small-icon2" />
<img src="./imgs/square.png" class="small-icon3" />
</div>
<div class="col" class="col-right">
<div class="gallery-box">
<img src="./imgs/pic2.jpg" id="gallery" />
<ul>
<li class="btn">01</li>
<li class="btn active">02</li>
<li class="btn">03</li>
<li class="btn">04</li>
</ul>
</div>
</div>
</div>
<img src="./imgs/circle.png" class="small-icon4" />
<img src="./imgs/square.png" class="small-icon5" />
</div>
<script>
var btn = document.getElementsByClassName('btn');
var gallery = document.getElementById('gallery');
var imgs = new Array(
'imgs/pic1.jpg',
'imgs/pic2.jpg',
'imgs/pic3.jpg',
'imgs/pic4.jpg',
);
for (let i = 0; i < btn.legnth; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}
</script>
Any help would be apprecaited. Thanks!
I was reading you code and find the mistake. You write 'length' wrong in the loop. Here how te right code looks like:
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}
I am trying to apply this function to multiple projects and I want to not repeat it. How can I do it in Vanilla JS? See the code below.
let slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
let i;
let x = document.getElementsByClassName("slides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
document.getElementsByClassName("pagination")[0].innerText = slideIndex + ' / ' + x.length;
}
<div class="project1">
<div class="pagination"></div>
<div class="imgslide noselect">
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<img class="slides" src="img/project-1/Scan-4.jpg">
<!-- <img class="slides" src="img/Scan-8.jpg"> -->
<img class="slides" src="img/project-1/Scan-24.jpg">
<img class="slides" src="img/project-1/Scan-35.jpg">
<img class="slides" src="img/project-1/Scan-39.jpg">
<img class="slides" src="img/project-1/Scan-40.jpg">
</div>
</div>
<div class="project2">
<div class="pagination"></div>
<div class="imgslide noselect">
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<img class="slides" src="img/project-1/Scan-41.jpg">
<!-- <img class="slides" src="img/Scan-8.jpg"> -->
<img class="slides" src="img/project-1/Scan-22.jpg">
<img class="slides" src="img/project-1/Scan-33.jpg">
<img class="slides" src="img/project-1/Scan-38.jpg">
<img class="slides" src="img/project-1/Scan-49.jpg">
</div>
</div>
Divs with class project1 and project2 should be separated and the function simply changes image once clicked. I want to apply the same function for multiple projects without re-writing it every time.
Instead of getting all the slides document.getElementsByClassName("slides") you should get the slides of the appropriate project document.getElementById("projectN").getElementsByClassName("slides"). You'll have to change both functions to accept another parameter for specifying the project.
let projectIndexes = {
project1: 1,
project2: 1
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slides");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
document.getElementById(project).getElementsByClassName("pagination")[0].innerText = index + ' / ' + x.length;
projectIndexes[project] = index;
}
.slides {
display: none;
}
<div id="project1">
<div class="pagination"></div>
<div class="imgslide noselect">
<button class="prev" onclick="plusDivs('project1', -1)">Previous</button>
<button class="next" onclick="plusDivs('project1', 1)">Next</button>
<img class="slides" src="img/project-1/Scan-4.jpg" alt="project1 slide1">
<img class="slides" src="img/project-1/Scan-24.jpg" alt="project1 slide2">
<img class="slides" src="img/project-1/Scan-35.jpg" alt="project1 slide3">
<img class="slides" src="img/project-1/Scan-39.jpg" alt="project1 slide4">
<img class="slides" src="img/project-1/Scan-40.jpg" alt="project1 slide5">
</div>
</div>
<br />
<div id="project2">
<div class="pagination"></div>
<div class="imgslide noselect">
<button class="prev" onclick="plusDivs('project2', -1)">Previous</button>
<button class="next" onclick="plusDivs('project2', 1)">Next</button>
<img class="slides" src="img/project-1/Scan-41.jpg" alt="project2 slide1">
<img class="slides" src="img/project-1/Scan-22.jpg" alt="project2 slide2">
<img class="slides" src="img/project-1/Scan-33.jpg" alt="project2 slide3">
<img class="slides" src="img/project-1/Scan-38.jpg" alt="project2 slide4">
<img class="slides" src="img/project-1/Scan-49.jpg" alt="project2 slide5">
</div>
</div>
I see you have a good answer but I am adding this as an alternative.
I would suggest using a class for a more generic selector to the parent then use that. Note I also added the option here to set a predefined displayed image by using the data-slide-index attribute, then set that to the value of the currently selected image. If that were saved to a cookie for example, you could restore from that also.
You could remove the project1 and project2 classes if you wanted to.
I also used data-direction so that I could remove the click handler from the markup and not really care which button was clicked.
a bit cleaner markup without the event, making it more generic there without the group name need
restore the last viewed/first to view (with cookie addition or from back-end)
used a hidden class and toggled that for the show/hide
used a 0 based internally numbers as arrays are 0 based and makes coding simpler to maintain but added 1 for the display for normal people.
importantly, NO use of global variables
(function setup() {
// add event listener to buttons
let els = document.getElementsByClassName("project-container");
for (let i = 0; i < els.length; i++) {
let prevnext = els[i].getElementsByClassName("prevnext");
for (let p = 0; p < prevnext.length; p++) {
prevnext[p].addEventListener("click", plusMinusDivs, false);
}
//hide/show for each group, avoid this call by adding classes to markup
showImage(els[i]);
}
})();
function plusMinusDivs() {
let parent = this.closest(".project-container");
let slider = this.closest(".imgslide");
let slideIndex = slider.dataset.slideIndex * 1;
let nd = this.dataset.direction * 1;//*1 to avoid parse
slideIndex = slideIndex += nd;
let slides = parent.querySelectorAll(".slides");
if (slideIndex >= slides.length) {
slideIndex = 0;
}
if (slideIndex < 0) {
slideIndex = slides.length - 1;
}
slider.dataset.slideIndex = slideIndex + "";
showImage(parent);
}
function showImage(parent) {
let slides = parent.querySelectorAll(".slides");
let len = slides.length;
for (let s = 0; s < len; s++) {
slides[s].classList.toggle("hidden", true);
}
let slider = parent.querySelector(".imgslide");
let slideIndex = slider.dataset.slideIndex * 1;//*1 to avoid parse
slides[slideIndex].classList.toggle("hidden", false);
let pageText = (slideIndex + 1) + ' / ' + len;
parent.querySelector(".pagination").innerText = pageText;
}
.hidden {
display: none;
}
.prevnext {
background-color: #AAEEDD;
}
<div class="project-container project1">
<div class="pagination"> </div>
<div class="imgslide noselect" data-slide-index="0">
<button class="prevnext prev" data-direction="-1"><<</button>
<button class="prevnext next" data-direction="1">>></button>
<img class="slides" src="img/project-1/Scan-4.jpg" alt="4" />
<img class="slides" src="img/project-1/Scan-24.jpg" alt="24" />
<img class="slides" src="img/project-1/Scan-35.jpg" alt="35" />
<img class="slides" src="img/project-1/Scan-39.jpg" alt="39" />
<img class="slides" src="img/project-1/Scan-40.jpg" alt="40" />
</div>
</div>
<div class="project-container project2">
<div class="pagination"> </div>
<div class="imgslide noselect" data-slide-index="3">
<button class="prevnext prev" data-direction="-1"><<</button>
<button class="prevnext next" data-direction="1">>></button>
<img class="slides" src="img/project-1/Scan-41.jpg" alt="2-41" />
<img class="slides" src="img/project-1/Scan-22.jpg" alt="2-42" />
<img class="slides" src="img/project-1/Scan-33.jpg" alt="2-33" />
<img class="slides" src="img/project-1/Scan-38.jpg" alt="2-38" />
<img class="slides" src="img/project-1/Scan-49.jpg" alt="2-49" />
</div>
</div>
I want my javascript to work separately with both id="wrapper" and id="wrapper2" but it is not doing so.....i really don't know what to do next pls help...is i am doing something wrong or i have to make different javascripts for my different image sliders on same page. or any editing in this code will help??
<div id="wrapper">
<div class="slides">
<img src="slide1/1.jpeg" alt="image" width="100%" height="100%"/>
</div>
<div class="slides">
<img src="slide1/2.jpeg" alt="image" width="100%" height="100%"/>
</div>
<div class="slides">
<img src="slide1/3.jpeg" alt="image" width="100%" height="100%"/>
</div>
<button class="btn" onclick="plusIndex(1)" id="btn1">❮</button>
<button class="btn" onclick="plusIndex(-1)" id="btn2">❯</button>
</div>
<div id="wrapper2">
<div class="slides">
<img src="slide2/1.jpeg" alt="image" width="100%" height="100%"/>
</div>
<div class="slides">
<img src="slide2/2.jpeg" alt="image" width="100%" height="100%"/>
</div>
<div class="slides">
<img src="slide2/3.jpeg" alt="image" width="100%" height="100%"/>
</div>
<button class="btn" onclick="plusIndex(1)" id="btn1">❮</button>
<button class="btn" onclick="plusIndex(-1)" id="btn2">❯</button>
</div>
here is the javascript
var index = 1;
function plusIndex(n){
index = index + n;
showImage(index);
}
showImage(index);
function showImage(n){
var i;
var x = document.getElementsByClassName("slides");
if(n > x.length){
index = 1;
}
if(n <=0 ){
index = x.length;
}
for(i=0; i<x.length;i++){
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
}
In your html put the class name of the wrapper in your plusIndex call, thus:
<button class="btn" onclick="plusIndex(1, 'wrapper')" id="btn1">❮</button>
<button class="btn" onclick="plusIndex(-1, 'wrapper')" id="btn2">❯</button>
and
<button class="btn" onclick="plusIndex(1, 'wrapper2')" id="btn1">❮</button>
<button class="btn" onclick="plusIndex(-1, 'wrapper2')" id="btn2">❯</button>
Then in the js, keep an associative array for index, not a single number, thus:
var indexes = {'wrapper': 1, 'wrapper2': 1};
then the rest is easy:
function plusIndex(n, id){
indexes[id] += n;
showImage(indexes[id], id);
}
function showImage(n, id){
var i;
var el = document.getElementById(id);
var x = el.querySelector('slides');
if(n > x.length){
indexes[id] = 1;
}
if(n <=0 ){
indexes[id] = x.length;
}
for(i=0; i<x.length;i++){
x[i].style.display = "none";
}
x[indexes[n] - 1].style.display = "block";
}
Haven't tested the code, but should get you there mostly.
I have a list of elements which contains an image & few more elements. I need to get the src of the image. HTML code is like this.
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>
I tried to get the src of the image with this code.
var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i <= elem.length; i++) {
var imgTag = elem[i].getElementsByTagName('img')[0];
var srcLink = imgTag.src;
console.log(srcLink);
}
It gives the following error.
Uncaught TypeError: Cannot read property 'src' of undefined
You have an off-by-one error, but why not use querySelectorAll instead, it'll be a lot cleaner:
const imgs = document.querySelectorAll('.flex-figure img');
imgs.forEach(img => console.log(img.src));
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>
querySelectorAll is a lot more flexible than the getElementsBy* methods, and also returns a static NodeList which can be directly iterated over, unlike the other methods (which return live HTMLCollections, which can be difficult to deal with).
Change
for (var i = 0; i <= elem.length; i++) {
To
for (var i = 0; i < elem.length; i++) {
var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i < elem.length; i++) {
var imgTag = elem[i].getElementsByTagName('img')[0];
var srcLink = imgTag.src;
console.log(srcLink);
}
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>
console.log(document.getElementsByTagName("IMG")[0].src)
<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>
I am attempting to get all of the images with classname of tile into an array called tiles. I've tried a few things but it keeps giving me 0 length arrays/nodelists.
What am I doing wrong?
for(var i =0; i<document.images.length; i++){
var thumb = document.images[i]
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
I have also tried
var allInputs = document.getElementsByTagName("img");
for(var i =0; i<allInputs.length; i++){
if(allInputs[i].className == "tile" tiles.push(allInputs[i]);
}
EDIT: Per request, here is all of the HTML code.
<body>
<form id="ct" action="">
<div id="head">
<img src="kgtitle.jpg" alt="Kiddergarden" />
</div>
<div id="menu">
<img src="kgmenu.jpg" alt="" />
</div>
<div id="title">
<img src="ctitle.jpg" alt="Matching Game" />
</div>
<div id="board">
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<br />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<br />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<br />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
</div>
<div id="main">
<p>Play the Concentration game! Click the tiles on the left and
match pairs of identical images.
<br /><br />
Click the <b>Reload Tiles</b>
button below to randomize the position of the tiles and play
again.
<br /><br />
Click the <b>Show Tiles</b> button to view the
solution.
</p>
</div>
<div id="controls">
<p>
<input type="button" value="Reload Tiles" id="reload" />
<input type="button" value="Show Tiles" id="showAll" />
</p>
</div>
<address>
Kiddergarden ยท
A safe site on the Web for kids and families
</address>
This is the entirety of my javascript code
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
function randomSort(arr) {
arr.sort(function () {
return 0.5 - Math.random();
});
}
function setOpacity(object, value) {
// Apply the opacity value for IE and non-IE browsers
object.style.filter = "alpha(opacity = " + value + ")";
object.style.opacity = value/100;
}
var flipCount = 0;
var firstFlip;
var secondFlip;
addEvent(window, "load", setupTiles(),false);
function setupTiles() {
var tiles = new Array();
alert(document.getElementsByTagName('img').length);
for(var i =0; i<document.getElementsByTagName("img").length; i++){
var thumb = document.getElementsByTagName("img");
thumb = thumb[i];
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
var tileImages = new Array(tiles.length);
for(var j = 0; i < tileImages.length/2; j++){
tileImages[j] = new Image("tileimage"+j+".jpg");
}
for(var k = tileImages.length/2; i<tileImages.length;k++){
tileImages[k] = new Image("tileimage"+(i-tileImages.length)+".jpg");
}
randomSort(tileImages);
for(var l =0; i<tiles.length;l++){
tiles[l].image = tileImages[l];
tiles[l].onclick = flipTile;
}
/*document.getElementById("showAll").onclick = function () {
for(var i =0; i<tiles.length;i++){
tiles[i].src = tiles[i].image.src;
}
}
document.getElementById("reload").onclick = function () {
location.reload();
}*/
}
function flipTable(){
if(flipCount == 0){
this.src = this.image.src;
firstFlip = this;
flipCount++;
}
else if(flipCount == 1){
this.src = this.image.src;
secondFlip = this;
flipCount++;
checkTiles();
}
return false;
}
function checkTiles() {
if(firstFlip.image.src != secondFlip.image.src){
flipBack();
}
else{
flipCount=0;
firstFlip.opacity = 0.70;
firstFlip.style.filter = "alpha(opacity= 70)";
firstFlip.onclick = function () {
return false;
}
secondFlip.opacity = 0.70;
secondFlip.style.filter = "alpha(opacity= 70)";
secondFlip.onclick = function () {
return false;
}
}
}
function flipBack() {
firstFlip.src = "tile.jpg";
secondFlip.src = "tile.jpg";
flipCount = 0;
}
your script is fine, I just tested it. it probably returns 0 because you add the script to the top of you file, just make sure you add in the end:
<html>
<body>
<div id="board">
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
</div>
</body>
<script>
var tiles = [];
for(var i =0; i<document.images.length; i++){
var thumb = document.images[i]
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
alert(tiles.length)
</script>
</html>
At least is the only cause I could find to return 0. Please let me know if it solved your issue.
If you ar importing the script from a different file, just add the import on the end, like this:
<html>
<body>
<div id="board">
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
<img src="tile.jpg" class="tile" alt="" />
</div>
</body>
<script src="myscript.js"></script>
</html>
a third option is to add your code in a function on document ready listener:
document.addEventListener("DOMContentLoaded", function(event) {
var tiles = [];
for(var i =0; i<document.images.length; i++){
var thumb = document.images[i]
if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
tiles.push(thumb);
}
alert(tiles.length)
});