How to use for loop in javascript function

Question

I've created few map areas in an image. I want to display the description of particular area onclick. I used one javascript function. Image contains around 15-20 map areas. Below is simple function for only 3 areas. This one working fine.

function showdiv(id) {
                obj = document.getElementById(id);
                alert(obj);

                if (obj.style.display == 'block') {
                    obj.style.display = 'none';
                }
                if (obj.style.display == 'none') {
                    if (obj == whatever1) {
                        whatever1.style.display = 'block';
                        whatever2.style.display = 'none';
                        whatever3.style.display = 'none';
                    } else if (obj == whatever2) {
                        whatever2.style.display = 'block';
                        whatever1.style.display = 'none';
                        whatever3.style.display = 'none';
                    } else if (obj == whatever3) {
                        whatever3.style.display = 'block';
                        whatever2.style.display = 'none';
                        whatever1.style.display = 'none';
                    }
                }
            }

I believe this is method not fair for more than 15 map areas. So i tried to use for loop. But something went wrong.

 <script>
                function showdiv(id) {
                    obj = document.getElementById(id);
                    if (obj.style.display == 'block') {
                        obj.style.display = 'none';
                    }
                    if (obj.style.display == 'none') {
                        for (var i=0; i<=12; i++) {
                            var div = whatever + i;
                            if (div == obj) {
                                div.style.display = 'block';
                                home.style.display = 'none';
                            } else {
                                div.style.display = 'none';
                            }
                        }
                    }
                }
</script>

What's the solution to this basic problem? Anybody have any suggestion?? Thank you so much in advance.

var div = whatever + i; - I assume in the variable div you are expecting a DOM element? That's not going to happen with that statement — CodingIntrigue
– CodingIntrigue, Commented Mar 13, 2015 at 8:14

Chris · Accepted Answer · 2015-03-13 08:28:20Z

I suggest that you summarize all your wahtever elements with classes. i.e:

<div id="whatever1" class="whateverElement"/>

Then in your function you can handle them all the same:

function showdiv(id) {
        obj = document.getElementById(id);
        var isBlock = (obj.style.display == 'block');

        //first change all elments
        var allElements = document.getElementsByClassName("whateverElement");

        for(var e in allElements){
            var element = allElements[e];
            element.style.display = "none";
        }

        //now change the value for the object with the given id
        if (isBlock) {
            obj.style.display = 'none';
        } else {
            obj.style.display = 'block';
        }
}

Just to show that it can be worth having a look at "jQuery" for such tasks the following code would do the same as above using jQuery:

function showdiv(id) {
    $(".whateverElement").hide();
    $("#" + id).show();
}

Mahesh · Accepted Answer · 2015-03-13 08:17:51Z

0

if whatever is a string then you can do as following:

var whatever = whatever+i;
var div = $(whatever);
alert(div);
if (div == obj) {
//.....your code continue.......

answered Mar 13, 2015 at 8:17

Mahesh

1,0911 gold badge12 silver badges29 bronze badges

Comments

Jordi Castilla · Accepted Answer · 2015-03-13 08:22:21Z

0

You must get your elements by

div = document.getElementById("whatever" + i);

then manage it as you did...

answered Mar 13, 2015 at 8:22

Jordi Castilla

27.1k8 gold badges73 silver badges113 bronze badges

Collectives™ on Stack Overflow

How to use for loop in javascript function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related