javascript not working on button as expected

Question

I'm trying to connect previous and fwd buttons to a gallery and I want the previous button to be hidden on first image of the gallery but javascript doesn't seem to be working at all.

Javascript

var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';
var imgCount = 0;
function next() {
    imgCount++ ;
    document.getElementById("gallery").src = imageGallery[imgCount] ;
}

function previous() {
    imgCount--;
    document.getElementById("gallery").src = imageGallery[imgCount] ;   
    }

if(document.getElementById("gallery").getAttribute("src") == "1.png")
    {
    document.getElementById("previous").style.visibility = 'hidden';
    }
else 
    {
    document.getElementById("previous").style.visibility = 'visible';
    }

HTML

<div id="img">
<img id="gallery" src="1.png" style="height:420px; width:744px" >
<div id="imgNav">
    <a id="previous" href onclick="previous(); return false;">previous</a>
    <span style="color:#666; font-size:0.9em"> | </Span>
 <a id="next" href onclick="next(); return false;">next</a>
</div>
</div>

Actually the logic is if 'src' attribute of id 'gallery' is '1.png' then 'visibility' of element with id 'previous' is 'hidden' else not but doesn't seem to be working. Can anyone help figuring it out.

nothing...it just isn't hiding as expected at the very first image of the gallery.. — Black Hawk
– Black Hawk, Commented Oct 14, 2013 at 14:28
"javascript doesn't seem to be working at all" is a VERY broad statement. Have you put in alerts or console.log or debugger statements to see if javascript is working? Chances are it's working fine, and what you're seeing is that your code executes at a time you're not expecting. — Scott Mermelstein
– Scott Mermelstein, Commented Oct 14, 2013 at 14:29
Is the href attribute like hat in your code or have you just hidden it in this post? That may be a problem. — Mohammad Areeb Siddiqui
– Mohammad Areeb Siddiqui, Commented Oct 14, 2013 at 14:31

emerson.marini · Accepted Answer · 2013-10-14 15:44:10Z

1

You're probably trying to check on an image that's not totally loaded yet. Did you remember to place your code to run just when the page is fully loaded (in case it's placed in the page headers - you didn't mention whether it is or not)?

UPDATED

var imageGallery = new Array();
imageGallery[0] = '1.png';
imageGallery[1] = '2.png';
imageGallery[2] = '3.png';
imageGallery[3] = '4.png';
imageGallery[4] = '5.png';

var imgCount = 0;

function checkNav() {
    var previousLnk = document.getElementById("previous");
    var nextLnk = document.getElementById("next");

    previousLnk.style.visibility = imgCount == 0 ? 'hidden' : 'visible';
    nextLnk.style.visibility = imgCount >= (imageGallery.length - 1) ? 'hidden' : 'visible';
}

function setImg() {
    var gallery = document.getElementById("gallery");

    gallery.src = imageGallery[imgCount];
}

function next() {
    imgCount++;
    setImg();
    checkNav();
}

function previous() {
    imgCount--;
    setImg();
    checkNav();
}

window.onload = function () {
    checkNav();
}

Demo: http://jsfiddle.net/N7V9E/

edited Oct 14, 2013 at 15:44

answered Oct 14, 2013 at 14:31

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Black Hawk Over a year ago

It kind of has worked but only partially now it doesn't show previous button again when src attr is not 1.png. I mean it remains hidden...ans yeah the code is placed in the header.

emerson.marini Over a year ago

This code is running just once. So you need to re-run it on the navigation (previous/next) clicks aswell.

emerson.marini Over a year ago

I've updated the answer to make it more clear and easier to work (if you need to change something).

Black Hawk Over a year ago

Found the problem images were called before they were being loaded...Thanks

Collectives™ on Stack Overflow

javascript not working on button as expected

Javascript

HTML

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Javascript

HTML

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related