CODEWITHSUNDEEP
javascriptcsshtmlonclick
ocat
ocat

Reputation: 201

Disabling onclick attribute with javascript

How do I disable the other onclick event once one of them has been activated. Both divs are set to display:none; in the CSS. This is probably really simple but I am new to programming.

HTML

<a id="leftbutton" href="#" onclick="showDiv(this.id); return false;">click me</a>
<a id="righttbutton" href="#"onclick="showDiv(this.id); return false;">click me</a>

Javascript

function showDiv(id)
{   
  if(id == "leftbutton"){
     document.getElementById('orangediv').style.display = 'block';
     }else{
     document.getElementById('greendiv').style.display = 'block';
}}

Upvotes: 11

Views: 58027

Answers (7)

abuduba
abuduba

Reputation: 5042

You can set the href attribute as id of div which should be visibled after you click. showDiv function can get entire element as argument, then you have access to it attributes as well. Second argument can be a id of element you should hide, 

   <a id="leftbutton" href="orangediv" onclick="showDiv(this,'rightbutton');return false">click me</a>
   <a id="righttbutton" href="greendiv"onclick="showDiv(this,'leftbutton');return false">click me</a>

And in js:

var showDiv =function(el, toHide){
  document.getElementById( el.href ).style.display = 'block';
  document.getElementById( toHide ).style.display = 'none';
  el.onclick = null; //remove onclick declaration from this anchor.

}

Upvotes: 0

cptHammer
cptHammer

Reputation: 460

this should do the trick:

function showDiv(id)
{   
  if(id == "leftbutton"){
     document.getElementById('orangediv').style.display = 'block';
     document.getElementById('righttbutton').onclick = null;
     }else{
     document.getElementById('greendiv').style.display = 'block';
     document.getElementById('leftbutton').onclick = null;
}}

Upvotes: 17

Maen
Maen

Reputation: 10698

You could test if the other element is displayed :

function showDiv(id)
{ 
  if  (id == "leftbutton" && (document.getElementById('greendiv').style.display == 'none'))
  {
      document.getElementById('orangediv').style.display = 'block';
  }
  else if(id == "rightbutton" && (document.getElementById('orangediv').style.display == 'none'))
  {
      document.getElementById('greendiv').style.display = 'block';
  }
}

Upvotes: 0

aefxx
aefxx

Reputation: 25249

function showDiv(id) {
    if ( showDiv.executed ) {
        return false;
    }

    if  ( id === "leftbutton" ) {
       document.getElementById('orangediv').style.display = 'block';
    } else {
       document.getElementById('greendiv').style.display = 'block';
    }

    showDiv.executed = true;
}

showDiv.executed = false;

Doing it this way, you could always re-enable the showing by simply setting showDiv.executed to false.

Upvotes: 0

Musa
Musa

Reputation: 97672

Just set the onclick property of the other element to null;

if  (id == "leftbutton"){
        document.getElementById('orangediv').style.display = 'block';
        document.getElementById('righttbutton').onclick = null;
    }
    else{
        document.getElementById('greendiv').style.display = 'block';
        document.getElementById('leftbutton').onclick = null;
    }
}

Upvotes: 0

Sune Trudslev
Sune Trudslev

Reputation: 974

Something along these lines:

function showDiv(id){   
var o = document.getElementById('orangediv');
var g = document.getElementById('greendiv');
if  (id == "leftbutton"){
     o.style.display = 'block';
}else{
    g.style.display = 'block';
}
o.writeAttribute('onclick','');
g.writeAttribute('onclick','');
}

Upvotes: 0

JoonasL
JoonasL

Reputation: 524

Like this for example:

function showDiv(id){   

  if  (id == "leftbutton"){
  document.getElementById('orangediv').style.display = 'block';
  document.getElementById('rightbutton').onclick = "#";
}else{
  document.getElementById('greendiv').style.display = 'block';
  document.getElementById('leftbutton').onclick = "#";
}}

Upvotes: 0

Related Questions