0

I am using Javascrip and I have a function like the following where I want to hide all div. But I don't know why this code is not working. Will anyone help me with this?

Javasvript

 function showDiv(divTag,id)
    {
     var i;
      for(i=1;i<7;i++)
     {
       document.getElementById(divTag+i).style.display = 'none';
     }
      document.getElementById(divTag+id).style.display = 'block';
    }

or

function showDiv(divTag,id)
{
  var i;
  for(i=1;i<5;i++)
 {
   var tempDiv = divTag + i;
   document.getElementById(tempDiv).style.display = 'none';
 }
document.getElementById(divTag+id).style.display = 'block';
}

And HTML

 <a href="#" onClick="showDiv(\"hide_\",1)">Show Only Div1</a>
    <div id="hide_1">
    Abc
    </div>
     <a href="#" onClick="showDiv(\"hide_\",2)">Show Only Div2</a>

    <div id="hide_2">
    BCD
    </div>
<a href="#" onClick="showDiv(\"hide_\",3)">Show Only Div2</a>

    <div id="hide_3">
    EDF
    </div>
<a href="#" onClick="showDiv(\"hide_\",4)">Show Only Div2</a>

    <div id="hide_4">
    FGE
    </div>

Both of the abov process I have tried but failed to do that

1
  • also can you please describe what you are planning to do? so that I will work on the code and edit my post with the same :-) May 22, 2012 at 5:16

2 Answers 2

1

Several things:

  1. The "onclick" (not "onClick") is the correct way to assign the click event handler in both html and JavaScript.
  2. You are looping from 1 to 6 in for(i=1;i<7;i++) line of the first function, but you only have 4 elements in your html. When reaching the non-existing fifth - your code will throw an error. Something along the lines of "TypeError: Cannot read property 'style' of null".
  3. As @verisimilitude has mentioned, you have a syntax error in your html where you put a quoted text inside another text that's quoted in the same way. It should be onclick="showDiv('hide_',1)". Note the single quotes around 'hide_'.

Here's the code that works. Click here to see it in action.

Here's your JavaScript function:

// Please note that it must be in the global scope
// otherwise you won't be able to call it from your html.

function showDiv(divTag, id) {
  var i;
  for (i = 1; i < 5; i++) {
    var tempDiv = divTag + i;
    document.getElementById(tempDiv).style.display = 'none';
  }
  document.getElementById(divTag+id).style.display = 'block';
}

Also, take a look at another working version of your code that pre-validates the existence of your elements before hiding/showing them. So you don't have to worry about your for loop iterating over elements that have been removed.

And here's your html:

<a href="#" onclick="showDiv('hide_', 1);">Show Only Div1</a>
<div id="hide_1">Div1</div>

<a href="#" onclick="showDiv('hide_', 2);">Show Only Div2</a>
<div id="hide_2">Div2</div>

<a href="#" onclick="showDiv('hide_', 3);">Show Only Div3</a>
<div id="hide_3">Div3</div>

<a href="#" onclick="showDiv('hide_', 4);">Show Only Div4</a>
<div id="hide_4">Div4</div>​
1
  • 1
    +1. for the first point that you mentioned. I think we should constantly strive for XHTML compliance and have lowercase HTML attributes. :) May 22, 2012 at 5:26
0
<a href="#" onClick="showDiv("hide_",1)">Show Only Div1</a> 

yields a javascript syntax error. This should be

<a href="#" onClick="showDiv('hide_',1)">Show Only Div1</a>  

Check the single quotes around "hide_"

4
  • care to update the above question with what you're really looking for? Moreover, it was a syntax error that was coming up when I copy + pasted your code in my editor which I corrected. May 22, 2012 at 5:46
  • I did not copy and paste the cose. I wrote it here so I did some mistakes.
    – Jhilom
    May 22, 2012 at 13:49
  • @user1379021 If you didn't copy-paste your code exactly, how can we even debug it?? Anyway, did you try the solution I suggested in the other answer?
    – Oleg
    May 23, 2012 at 6:47
  • Yes. @Oleg has explained everything properly step-by-step in his previous answer. I even asked you to functionally describe what you exactly want so that we may guide you. May 23, 2012 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.