How to delete a function effect when a second click on the button in javascript?

Question

maybe one of you can help me. I've written a feature in javascript that adds underlining to all "a" selectors. The function is called with the "onclick" attribute. I would like to reverse the effect, i.e. remove the underscore at second click on the same button. The question is how to do it ?

HTML code:

<button type="button" class="underlineLinks" id="underlineLinks" onclick="underlineLinks()">Click</button>

JS code:

function underlineLinks() {
    const links = document.querySelectorAll("a");
    links.forEach(a => a.style.textDecoration = "underline");
}

[asking the same question again?](https://stackoverflow.com/questions/62028300/how-do-i-add-an-underline-for-all-the-links-on-the-website-when-i-click-the-butt) — Yousaf, May 28 '20 at 18:28
this is pretty easy with jquery, would you accept answers in jquery? — ssomename, May 28 '20 at 18:32
The highest upvoted answer in your other question already told you how to reverse it. — zero298, May 28 '20 at 18:32

user3401335 · Accepted Answer · 2020-05-28T18:51:05.233

1

You can create a CSS class with the decoration underline

.class
{
    text-decoration: underline
}

and use toggle in the JS.

Toggle will add the class if it isn't applied to your link and remove the class if it is applied to your link

function underlineLinks() {
    const links = document.querySelectorAll("a");
    links.forEach(a => a.classList.toggle("class"));
}

https://jsfiddle.net/u4sxfdy5/

edited May 28 '20 at 18:51

answered May 28 '20 at 18:34

user3401335

2,335
2
19
32

i like the toggle method – ehab May 28 '20 at 18:52
Thank you. Thanks to your answer, I solved my problem. Now I'm wondering how to keep the state when switching to other subpages. Will this code be suitable for such a modification ? – nsog8sm43x May 28 '20 at 19:11
If i understand your question, you want save the state so when someone return to this page, will found the class underline or not based on last state. With this code isn't possible, because every access to the page start from beginning state(without class). You can use LocalStorage(store in the browser) to save the state ore save in your db(server side) – user3401335 May 28 '20 at 19:18

score 0 · Answer 2 · answered May 28 '20 at 18:33

you could do this

function getUnderLineLinksSetter() {
  let areLinksUnderlines = false;
  return () => {
    const links = document.querySelectorAll('a');
    areLinksUnderlines = !areLinksUnderlines;
    links.forEach(a => {
      if (areLinksUnderlines) {
        a.style.textDecoration = 'initial';
      } else {
        a.style.textDecoration = 'underline';
      }
    });
  };
}

and then use the following html

<button type="button" class="underlineLinks" id="underlineLinks" onclick="getUnderLineLinksSetter()()">Click</button>

Its better to add event listeners from code and not using html inline functions by that i mean instead of setting the on click using html, you set it using javascript like this

// put this code inside a load event in the page so you make sure the button is in the dom
function getUnderLineLinksSetter() {
  let areLinksUnderlines = false;
  return () => {
    const links = document.querySelectorAll('a');
    areLinksUnderlines = !areLinksUnderlines;
    links.forEach(a => {
      if (areLinksUnderlines) {
        a.style.textDecoration = 'initial';
      } else {
        a.style.textDecoration = 'underline';
      }
    });
  };
}


document.getElementById('underlineLinks').addEventLisetner('click', getUnderLineLinksSetter())

And then remove the onclick from html

<button type="button" class="underlineLinks" id="underlineLinks">Click</button>

score 0 · Answer 3 · answered May 28 '20 at 18:34

function underlineLinks() {
    const links = document.querySelectorAll("a");
    var toChange = "underline"
    if(links[0].style.textDecoration != "underline")) toChange = "none"
    links.forEach(a => a.style.textDecoration = toChange);
}

Probably there is an easier way but idk, I shoot my shot

How to delete a function effect when a second click on the button in javascript?

3 Answers3