Uncall/reversing an 'onclick' function when another 'onclick' function is active

Question

I have a problem where when I click an element with an 'onclick' function, it works just as normal but when I click another element with a different 'onclick' function, the first 'onclick' function will remain. Instead, I want to be able able to reverse(?) the first function so that it is no longer active. These are h1 tags that are meant to act as nav and when I click on one of them they change their styles.

Here is my code:

function aboutActive() {
    var about = document.querySelector('.about');

    about.classList.toggle('about-active');
}

function contactActive() {
    var contact = document.querySelector('.contact');

    contact.classList.toggle('contact-active');
}

function discoverActive() {
    var discover = document.querySelector('.discover');

    discover.classList.toggle('discover-active');
}

function signUpActive() {
    var signUp = document.querySelector('.sign-up');

    signUp.classList.toggle('signUp-active');
}

 .about {
     position: absolute;
     left: 70.8%;
     top: 5%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
 .contact {
     position: absolute;
     left: 56%;
     top: 24%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
 .discover {
     position: absolute;
     left: 52.7%;
     top: 43%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
 .sign-up {
     width: 100%;
     position: absolute;
     left: 62.6%;
     top: 63%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
/* New styles applied by JS */
 .about-active {
     transform: translateX(-30%);
     color: #ffffff;
}
 .contact-active {
     transform: translateX(-22%);
     color: #ffffff;
}
 .discover-active {
     transform: translateX(-24%);
     color: #ffffff;
}
 .signUp-active {
     transform: translateX(-14.2%);
     color: #ffffff;
}

<h1 class="about" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="aboutActive()">ABOUT</h1>
<h1 class="contact" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="contactActive()">CONTACT</h1>
<h1 class="discover" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="discoverActive()">DISCOVER</h1>
<h1 class="sign-up" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="signUpActive()">SIGN UP</h1>

These are the functions that toggle through the styles when clicked on.

To reiterate, when I click on one of the h1 element, it does its 'onclick' function normally but if I want to click on a second h1 element, the second element's function will activate but the first will stay. How would I change it so that any previous functions will be reversed/uncalled?

Does this answer your question? [Simple throttle in js](https://stackoverflow.com/questions/27078285/simple-throttle-in-js) — Krzysztof Krzeszewski, Jan 11 '21 at 12:36
@KrzysztofKrzeszewski I think this answer is time-based whereas I just want to reverse/uncall the function when I click and activate the other function, disregarding the time. Apologies if I misread/misunderstood the answer you have given me. — Hamza Khan, Jan 11 '21 at 12:41
Well by doing the opposite, of what the function did in the first place? The function `aboutActive` added the class `about-active` to the element with the class `.about`- now what would the opposite of that action be, hm? — CBroe, Jan 11 '21 at 12:52
Of course this becomes a lot more compact, once you stop writing a separate function for each case - and use _one_ function instead, that gets parameters passed and / or makes use of `this` to determine what element the click happened on. — CBroe, Jan 11 '21 at 12:53
@CBroe Smh... the answer is always so simple aren't they. It's fully working now. Thanks for the help. — Hamza Khan, Jan 11 '21 at 13:03

score 2 · Accepted Answer · answered Jan 11 '21 at 14:19

function undo(ele){
    let cl = ele.classList;
    ele.classList.remove(cl[cl.length - 1], cl[cl.length - 2]);
}

function aboutActive() {
    let about = document.querySelector('.about');
    let current = document.querySelector(".current");
    if(current) undo(current);
    about.classList.toggle('about-active');
    about.classList.add("current");
}

function contactActive() {
    let contact = document.querySelector('.contact');
    let current = document.querySelector(".current");
    if(current) undo(current);
    contact.classList.toggle('contact-active');
    contact.classList.add("current");
}

I'm just adding 'current' class to active element.

If 'current' already exists then remove last 2 classes of the 'current' element.

It's not the best one but it works.

(well it's my first answer on stackoverflow so don't hate on me please)

score 1 · Answer 2 · answered Jan 11 '21 at 12:59

From what I understand, you want when you click on other function uncall function you clicked before

 var about = document.querySelector('.about');
 var contact = document.querySelector('.contact');

function aboutActive() {
    about.classList.toggle('about-active', true);
}

function contactActive() {
   
about.classList.toggle('about-active', false);
contact.classList.toggle('contact-active');

}

score 1 · Answer 3 · answered Jan 11 '21 at 13:09

Add a Reset function before click of any H1 which will reset all the h1 tag click

function aboutActive() {
  resetAll();
  var about = document.querySelector('.about');

  about.classList.toggle('about-active');
}

function contactActive() {
  resetAll();
  var contact = document.querySelector('.contact');

  contact.classList.toggle('contact-active');
}

function discoverActive() {
  resetAll();
  var discover = document.querySelector('.discover');

  discover.classList.toggle('discover-active');
}

function signUpActive() {
  resetAll();
  var signUp = document.querySelector('.sign-up');

  signUp.classList.toggle('signUp-active');
}

function resetAll() {
  var getheading = document.getElementsByTagName("H1");
  [].forEach.call(getheading, function(el) {
    var classes = el.className.split(" ").filter(c => !c.endsWith("-active"));
    el.className = classes.join(" ").trim();

  })
}

.about-active {
  transform: translateX(-30%);
  color: #ffffff;
}

.contact-active {
  transform: translateX(-22%);
  color: #ffffff;
}

.discover-active {
  transform: translateX(-24%);
  color: #ffffff;
}

.signUp-active {
  transform: translateX(-14.2%);
  color: #ffffff;
}

<h1 class="about" onclick="aboutActive()">ABOUT</h1>
<h1 class="contact" onclick="contactActive()">CONTACT</h1>
<h1 class="discover" onclick="discoverActive()">DISCOVER</h1>
<h1 class="sign-up" onclick="signUpActive()">SIGN UP</h1>

Is it alright if I ask what the resetAll() function actually does? Does it just delete/remove the active class when you click the H1 then add the active class? — Hamza Khan, Jan 11 '21 at 13:15
Yup it search for active class in all H1 if that exists it removes it before adding active class on clicked element — Master.Deep, Jan 11 '21 at 13:25
I ran into a problem where if you select one of the h1, you can't select it again to remove the active class even though of the .toggle — Hamza Khan, Jan 11 '21 at 13:40

score 0 · Answer 4 · answered Jan 11 '21 at 13:10

So what I ended up doing is just removing the active class when I call the function:

function aboutActive() {
var about = document.querySelector('.about');
var contact = document.querySelector('.contact');
var discover = document.querySelector('.discover');
var signUp = document.querySelector('.sign-up');

about.classList.toggle('about-active');
contact.classList.remove('contact-active');
discover.classList.remove('discover-active');
signUp.classList.remove('signUp-active');

}

I have to this for every h1 element so it isn't the best way but it works.

@Master.Deep has a much more efficient code than this answer — Hamza Khan, Jan 11 '21 at 13:18

Uncall/reversing an 'onclick' function when another 'onclick' function is active

4 Answers4