JavaScript can be used to deactivate the onclick attribute

Question

JavaScript can be used to deactivate the onclick attribute

Is there a way to deactivate one onclick event once the other has been activated? Both divs are initially hidden in the CSS. I'm new to programming, so any help is appreciated.

Markup

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

Script

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

javascript css html onclick

Answer 1

Answer №1

Here is the solution you are looking for:

function displayDiv(id)
{   
  if(id == "button1"){
     document.getElementById('blueBox').style.display = 'block';
     document.getElementById('button2').onclick = null;
     }else{
     document.getElementById('redBox').style.display = 'block';
     document.getElementById('button1').onclick = null;
}}

Answer 2

Here is the solution you are looking for:

function displayDiv(id)
{   
  if(id == "button1"){
     document.getElementById('blueBox').style.display = 'block';
     document.getElementById('button2').onclick = null;
     }else{
     document.getElementById('redBox').style.display = 'block';
     document.getElementById('button1').onclick = null;
}}

Answer 3

Answer №2

Here is a different variation:

const toggleDiv = (id) => {   
  if (id === "btn1") {
    document.getElementById('div1').style.display = 'block';
    document.getElementById('btn2').onclick = "#";
  } else {
    document.getElementById('div2').style.display = 'block';
    document.getElementById('btn1').onclick = "#";
  }
}

Answer 4

Here is a different variation:

const toggleDiv = (id) => {   
  if (id === "btn1") {
    document.getElementById('div1').style.display = 'block';
    document.getElementById('btn2').onclick = "#";
  } else {
    document.getElementById('div2').style.display = 'block';
    document.getElementById('btn1').onclick = "#";
  }
}

Answer 5

Answer №3

Here is a sample script that demonstrates similar functionality:

function displayElement(elementId) {   
    var red = document.getElementById('reddiv');
    var blue = document.getElementById('bluediv');

    if (elementId == 'rightButton') {
        red.style.display = 'block';
    } else {
        blue.style.display = 'block';
    }

    red.removeAttribute('onclick');
    blue.removeAttribute('onclick');
}

Answer 6

Here is a sample script that demonstrates similar functionality:

function displayElement(elementId) {   
    var red = document.getElementById('reddiv');
    var blue = document.getElementById('bluediv');

    if (elementId == 'rightButton') {
        red.style.display = 'block';
    } else {
        blue.style.display = 'block';
    }

    red.removeAttribute('onclick');
    blue.removeAttribute('onclick');
}

Answer 7

Answer №4

To disable the onclick function of another element, simply set it to null.

if  (id == "btn1"){
        document.getElementById('div1').style.display = 'block';
        document.getElementById('btn2').onclick = null;
    }
    else{
        document.getElementById('div2').style.display = 'block';
        document.getElementById('btn1').onclick = null;
    }
}

Answer 8

To disable the onclick function of another element, simply set it to null.

if  (id == "btn1"){
        document.getElementById('div1').style.display = 'block';
        document.getElementById('btn2').onclick = null;
    }
    else{
        document.getElementById('div2').style.display = 'block';
        document.getElementById('btn1').onclick = null;
    }
}

Answer 9

Answer №5

function displaySection(id) {
    if (displaySection.running) {
        return false;
    }

    if (id === "button1") {
        document.getElementById('sectionA').style.display = 'block';
    } else {
        document.getElementById('sectionB').style.display = 'block';
    }

    displaySection.running = true;
}

displaySection.running = false;

By following this method, you can easily re-enable the display feature by setting displaySection.running back to false.

Answer 10

function displaySection(id) {
    if (displaySection.running) {
        return false;
    }

    if (id === "button1") {
        document.getElementById('sectionA').style.display = 'block';
    } else {
        document.getElementById('sectionB').style.display = 'block';
    }

    displaySection.running = true;
}

displaySection.running = false;

By following this method, you can easily re-enable the display feature by setting displaySection.running back to false.

Answer 11

Answer №6

To determine if the adjacent element is visible, a simple test can be conducted:

function toggleVisibility(id) { 
  if (id == "menuButton" && (document.getElementById('submenu').style.display == 'none')) {
      document.getElementById('popupMenu').style.display = 'block';
  } else if (id == "closeButton" && (document.getElementById('popupMenu').style.display == 'none')) {
      document.getElementById('submenu').style.display = 'block';
  }
}

Answer 12

To determine if the adjacent element is visible, a simple test can be conducted:

function toggleVisibility(id) { 
  if (id == "menuButton" && (document.getElementById('submenu').style.display == 'none')) {
      document.getElementById('popupMenu').style.display = 'block';
  } else if (id == "closeButton" && (document.getElementById('popupMenu').style.display == 'none')) {
      document.getElementById('submenu').style.display = 'block';
  }
}

Answer 13

Answer №7

To make a div visible after clicking, you can set the href attribute as the id of the div. The showDiv function takes the entire element as an argument, giving you access to its attributes. You can also specify the id of the element to hide as a second argument.

<a id="toggleBtn1" href="hiddenDiv1" onclick="showDiv(this,'toggleBtn2');return false">Click me</a>
<a id="toggleBtn2" href="hiddenDiv2" onclick="showDiv(this,'toggleBtn1');return false">Click me</a>

In your JavaScript:

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

Answer 14

To make a div visible after clicking, you can set the href attribute as the id of the div. The showDiv function takes the entire element as an argument, giving you access to its attributes. You can also specify the id of the element to hide as a second argument.

<a id="toggleBtn1" href="hiddenDiv1" onclick="showDiv(this,'toggleBtn2');return false">Click me</a>
<a id="toggleBtn2" href="hiddenDiv2" onclick="showDiv(this,'toggleBtn1');return false">Click me</a>

In your JavaScript:

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

JavaScript can be used to deactivate the onclick attribute

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Revamp the website's design

How can one easily retrieve the callback function arguments from outside the function?

An issue of an infinite loop arises when utilizing the updated() lifecycle hook in VueJS

GraphQL query excluding empty fields for various types of objects

Throw an error if the entry is not found in the Firebase database

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

Unable to display text overlay on image in AngularJS

Create a custom div class specifically designed for an image button

Aligning CSS Divs with Changing Content

Retrieving POST request headers in Nightmare JS following a click() function execution and a wait() function delay

Searching for a column fails to yield any results after altering the value in

Troubleshooting tips for optimizing Opera and Internet Explorer performance

Directing JSON POST Request Data to View/Controller in a Node.js Application

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

Creating responsive modal windows in Vue and Laravel to dynamically adjust to the screen size

class-validator: ensures the correct number of digits are present in numeric values

Transform a div's style when hovering over another div using absolute positioning without repetition

How do I incorporate Spotify into my mobile app to enable seamless background music playback?

Ways to manage an element that has been loaded using the load query function

Struggling to make align-content function properly in a CSS flexbox layout grid