Disabling onclick attribute with javascript

Question

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 p

Answer 1

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';
  }
}

Answer 2

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 = "#";
}}

Answer 3

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','');
}

Answer 4

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;
}}

Answer 5

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;
    }
}

Answer 6

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.