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

Tips for retrieving modified data from a smart table in Angular 4

How to organize and reuse code efficiently with Node.js, EJS, and front-end JavaScript?

What is the reason for the continual influx of new users being added to the database?

Utilizing jQuery to Record the Status of HTML5 Forms

Discover the worth within the outcome obtained from the AJAX request

Steps to fully eliminate the recent action panel from Django's administrative user interface

Using AJAX to set a session variable in PHP

What could be causing the excess space in the right corner of my website's mobile version?

In the world of React in Meteor, the command event.preventDefault() doesn't seem

Insert a numerical value into a list to make a series of numbers whole

Establish a jQuery cookie to store language preferences

How to properly Open a "div" Element by its ID in ReactJS

Ways to add elements to the DOM using jQuery from the local storage?

Running the JavaScript code on a webpage using Selenium WebDriver

Leveraging Components within Components in Vue 2

Challenge implementing custom javascript to display categorical/string features on Shiny slider

Trigger an event when hovering over a disabled item in React using material-ui's tooltip feature

Hiding Modal Box Upon User Login: A Step-by-Step Guide

Tips for hiding a sidebar by clicking away from it in JavaScript

Tips for displaying Japanese characters followed by numbers in a single line on a web browser using CSS