CODEWITHSUNDEEP
javascript
Jesse Litton
Jesse Litton

Reputation: 1

Javascript Counter working but not hiding divs correctly

I am working on a site and using javascript to scroll through text. I am using a counter and its working, but when it goes through the conditional statements it's not hiding the divs or being consistent. Any thoughts on why this could be happening?

Thanks!

html:

    <div id="arrow2">
        <a id="arrowRight" href="javascript:ltoggle('box');"><img alt="Arrow Right" height="auto" src="images/rightarrow.png"></a>
    </div>

    <div id="content">
        <div class="boxPosition" id="box1">
            <p>This is a destination wedding.  Come early, and stay late!</p>
        </div>

        <div class="boxPosition" id="box2">
            <p>Festivities will start on Friday, August 16th.</p>
        </div>

        <div class="boxPosition" id="box3">
            <p>The wedding will be on Sunday, August 18th late in the day, so you should plan to take Monday off!</p>
        </div>

        <div class="boxPosition" id="box4">
            <p>a</p>
        </div>

        <div class="boxPosition" id="box5">
            <p>b</p>
        </div>

        <div class="boxPosition" id="box6">
            <p>c</p>
        </div>

        <div class="boxPosition" id="box7">
            <p>d</p>
        </div>

        <div class="boxPosition" id="box8">
            <p>e</p>
        </div>

js:

    var counter = 1;
    var numBoxes = 8;

    function toggle(divName){
counter++
var ele = document.getElementById(divName + counter);
console.log(divName + counter);

if(ele.style.display == "block"){
    ele.style.display = "none";
}
else{
    ele.style.display = "block";
}
if(counter==numBoxes){
    counter = 0;
}

    }

Upvotes: 0

Views: 82

Answers (2)

user416527
user416527

Reputation:

First, right out the gate "ltoggle" found in the image link "javascript:ltoggle('box');" is undefined. Looks like it should be just "toggle".

A suggestion would be to change the tag to:

    <a id="arrowRight" href="" onClick="toggle('box');return false;">

Second, JavaScript doesn't readily recognize styles that were set by the HTML itself. So this line will always be false on the first time through. This is your "inconsistancy" issue:

    if(ele.style.display == "block")

To fix this, I believe there is a call that js can use to find the css styles already set, otherwise, set it with js. Review this posting: Get a CSS value with JavaScript.

Answere both of those and this thing just might work.

Upvotes: 1

Ennui
Ennui

Reputation: 10190

Two things I see right off the bat: you are missing a semicolon after counter++ and you are referencing javascript:ltoggle('box') rather than javascript:toggle('box') in your anchor href.

Do changing those fix it? If not, would you mind setting up a JSFiddle where the problem is replicated so we can take a closer look?

Upvotes: 0

Related Questions