CODEWITHSUNDEEP
javascripthtml
Dr M L M J
Dr M L M J

Reputation: 2397

Second Show Div Function Not Working

I am trying to use show div on click. But First One is working properly but not second one.

 <script type="text/livescript">
    function showDiv() {
      div = document.getElementById('change_pass');
      div.style.display = "block";
    }

function showDiv1() {    
      div = document.getElementById('invite-friend_now');
      div.style.display = "block";
    }
 </script>

And Using links onclick :

<a href="#" onclick="javascript:showDiv();">Change Password</a>

<a href="#" onclick="javascript:showDiv1();">Invite Friend</a>

On clicking Change Password, That division pop ups properly. But when we click on Invite Friend link, Page go to top and url shows www.example.com/# only.(....trailing # only)

Upvotes: 2

Views: 65

Answers (2)

Lucas Rodrigues
Lucas Rodrigues

Reputation: 1192

You could be passing some parameter to use just one function. Also, you can use preventDefault() to prevent the page from scrolling up:

<script type="text/livescript">
    function showDiv(e, divName) {
      div = document.getElementById(divName);
      div.style.display = "block";
      e.preventDefault();
    }
</script>

<a href="#" onclick="showDiv(event, 'change_pass');">Change Password</a>

<a href="#" onclick="showDiv(event, 'invite-friend_now');">Invite Friend</a>

Also, check on this invite-friend_now ID as I think you might have misspelled it.

Upvotes: 2

Sinestro White
Sinestro White

Reputation: 54

I think it is going to be easier by using jQuery this way:

<button id="show_div">show div</button>
<div id="To_be_shown" style="display: none;"><p>some text</p></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  $("#show_div").click(function () {
    $("#To_be_shown").fadeIn(100);
  });  
</script>

Upvotes: -1

Related Questions