user2696787 user2696787 - 1 month ago 4
HTML Question

Javascript Logic In a loop/if statement

I have this function (transComplete) which performs the task of highlighting a relevant indicator showing the user which page they are on, each element of these controllers/indicators represents a page and will highlight appropriately.

This works independently however when I introduce a click function that allows to interact with indicators to move between pages it navigates correctly but does not highlight as needed (works only every two clicks) which leads me to believe its a logic issue in my code.

The boolean logic of true/false is the cause, the highlighting only occurs on the 'true' cases of the variable "isOnSecond" so I essentially need a solution that always highlights the relevant controller when clicked

The main function is below:

function transComplete() {

slideTransStep = 0;
crtSlideIndex = nextSlideIndex;
// for IE filters, removing filters re-enables cleartype
if ( {"filter");

// show next slide
showSlide((crtSlideIndex >= totalSlides) ? 1 : crtSlideIndex + 1);

//Highlights a nav circle every two transitions as the boolean alternates
if (isOnSecond == true) {

//unhighlight all controls
for (var i = 0; i < slidesControllersCollection.length; i++) {
if (slidesControllersCollection[i].className === slideHighlightClass) {
slidesControllersCollection[i].className = "";
// highlight the control for the next slide
document.getElementById("slide-control-" + crtSlideIndex).className = slideHighlightClass;
isOnSecond = false;
else {
isOnSecond = true;

The onclick Function:

function clickSlide(control) {



I think you made your trans function when you were still iterating from one page to the very next, now that user can go any frame, you need to clear any highlight each time, then put it again on current one.

Or rather, for performance's sake, store the last highlighted, then highlight the new one.

But ... why not just drop the 'onSecond' logic ? It doesn't make much sense for the user to get a highlight one time over two only...

Anyway if you keep it the onSecond idea, logic would be :

if (lastHighlighted) lastHighlighted.className = ""; 

if (isOnSecond) {
   lastHighLighted = document.getElementById("slide-control-" + crtSlideIndex);
   lastHighLighted.className = slideHighlightClass;
} else {
   lastHighLighted = null;

isOnSecond = ! isOnSecond;

But in fact i wonder if what you want is not the version without onSecond logic :

if (lastHighlighted) lastHighlighted.className = ""; 

lastHighLighted = document.getElementById("slide-control-" + crtSlideIndex);
lastHighLighted.className = slideHighlightClass;

(Rq declare lastHighlighted as a var so it can be in the scope of transComplete)