How to assign variable in passing multiple ID's in java script function?

Question

I try to pass two id's from my list to function, But my function unable to recognize the id's.

My code as follow:

<html>
<head>
<script language="javascript"> 
function toggle(id1, id2)   {    
var ele = document.getElementById(id2);  
var text = document.getElementById(id1);  
    if(ele.style.display == "block") {  
            ele.style.display = "none";
        text.innerHTML = "NDEM10K";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "NDEM10K";
    }
} 
</script>
</head>
 <body>
 <ol>
    <li>
        <a id="displayText" href="javascript:toggle(this.id);">NDEM10K</a> 
        <div id="toggleText" style="display: none" onclick="toggle(this.id);">
        <ul>
            <li>AP</li>
            <li>UP</li>
            <li>KA</li>
            <li>An</li>
            <li>ts</li>
        </ul>
            </div>
    </li>
</ol>
</body>
</html>

My function unable to recognise id's. So, I want to assign id to a variable.

My Full code is here:

<html>
<head>


<script language="javascript"> 
function toggle(id1,id2) {
    var ele = document.getElementById(id1);
    var text = document.getElementById(id2);
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "NDEM10K";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "NDEM10K";
    }
} 


</script>
</head>
 <body>
 <ol>
    <li>
        <a id="displayText" href="javascript:toggle(this.id);">NDEM10K</a> 
        <div id="toggleText" style="display: none" onclick="toggle(this.id);">

        <ul>
            States
            <li>Andhra</li>
            <li>Andhra</li>
            <li>Andhra</li>
            <li>Andhra</li>
            <li>Andhra</li>
        </ul>

            </div>
    </li>
    <li>
        <a id="dT" href="javascript:toggle(this.id);">NDEM50K</a> 
        <div id="tT" style="display: none" onclick="NDEM50K(this.id);">

        <ul>
            Districts
            <li>East Godavari</li>
            <li>West Godavari</li>
            <li>Krishna</li>
            <li>Vishaka</li>
            <li>Hyderabad</li>
        </ul>

            </div>
    </li>
    <li>
        <a id="2dT" href="javascript:toggle(this.id);">NDEM2K</a> 
        <div id="2tT" style="display: none" onclick="NDEM2K(this.id);">

        <ul>
            Districts
            <li>Hyderabad</li>
            <li>Kakinada</li>
            <li>Rajahmundry</li>
            <li>Vishaka</li>
            <li>Mumbai</li>
        </ul>

        </div>
    </li>

</ol>
</body>
</html>

I'm passing two id's one from anchor tag and another from div.. — Satya Chandra, Dec 24 '14 at 06:07
your call to toggle function pass only (this, id) so id1 will receive this and id2 will receive id — agentpx, Dec 24 '14 at 06:08
If I understand it correctly you have a function that expects two IDs, but while calling you will be passing only one ID. The requirement is that the function should get executed when it gets both the IDs. Is it correct ? — Diptendu, Dec 24 '14 at 06:10
You are not passing two ids, you are calling function twice by passing only one `id`! — Bharadwaj, Dec 24 '14 at 06:10
@satyachandra you bound the function twice, each with ONE argument, which doesn't equal to bind with two arguments. — Leo, Dec 24 '14 at 06:10
Right i thought it is a comma, but the context is correct if it is. Sorry about that @Bharadwaj — agentpx, Dec 24 '14 at 06:10
@agentpx no problem ;) you suspected as you thought it could be :) — Bharadwaj, Dec 24 '14 at 06:13

score 1 · Accepted Answer · answered Dec 24 '14 at 06:32

You are passing one id at a time, thats why your are getting error property of undefined. And why you want to pass id and create element in function, if you can pass elements itself in the function.

Try This:

<html>
 <head>
    <script language="javascript">
        function toggle(ele, text) {
            if (ele !== null && ele !== undefined && ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "NDEM10K";
            }
            else {
                ele.style.display = "block";
                text.innerHTML = "NDEM10K";
            }
        }
    </script>
</head>
<body>
    <ol>
        <li>
            <a id="displayText" onclick="toggle(this.nextSibling.nextSibling, this)"     href="#">NDEM10K</a> 
            <div id="toggleText" style="display: none" onclick="toggle(this, this.previousSibling.previousSibling);">
                <ul>
                    <li>AP</li>
                    <li>UP</li>
                    <li>KA</li>
                    <li>An</li>
                    <li>ts</li>
                </ul>
            </div>
        </li>
    </ol>
 </body>
</html>

score 0 · Answer 2 · answered Dec 24 '14 at 06:12

0

Based on everything you said in the comments I think you want this:

This

    <div id="toggleText" style="display: none" onclick="toggle(this.id);">

Should Be

    <div id="toggleText" style="display: none" onclick="toggle(this.id,this.parentNode.firstChild.id);">

answered Dec 24 '14 at 06:12

Joe Thomas

5,807
6
25
36

I have replaced but not getting output ! – Satya Chandra Dec 24 '14 at 06:18

Bharadwaj · Answer 3 · 2014-12-24T06:27:02.450

0

Since your ids will be constant strings, you can try by passing directly ids. Like,

toggle('displayText','toggleText')

edited Dec 24 '14 at 06:27

answered Dec 24 '14 at 06:20

Bharadwaj

2,535
1
22
35

I got by passing direct id's, Later I want to implement for more lists, so I need to pass id's. – Satya Chandra Dec 24 '14 at 06:22
Yes, as far as ID's which you are passing won't change, you can pass them directly – Bharadwaj Dec 24 '14 at 06:23
Or if you add more information to your question what actually you need to achieve, may be its better to solve it completly – Bharadwaj Dec 24 '14 at 06:25
ok, then its better to pass `id` strings to the function as you are calling same function by passing different `id`s. – Bharadwaj Dec 24 '14 at 06:42

How to assign variable in passing multiple ID's in java script function?

3 Answers3