Solution 1 :

Not really an explanation to the cause of the issue at hand, yet there are enough of those in here already.

Doing it with css on the whole document or body seems more simple than looping over each element separately.

window.onload = function(){
  document.getElementById('on').onclick = function(){
    document.body.classList.add('underline');
  };
  
  document.getElementById('off').onclick = function(){
    document.body.classList.remove('underline');
  }
}
a{text-decoration: none}
body.underline a{text-decoration: underline}
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>

<button id = 'on'>on</button>
<button id = 'off'>off</button>

In general I would try to avoid using the style properties of HTMLElements and try to work with classes/attributes instead.

Edit, as requested:

a{text-decoration: none}
body.underline a{text-decoration: underline}
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>

<button onclick = "document.body.classList.toggle('underline')">toggle</button>

Solution 2 :

You are trying to add an inline style to the collection of links returned from .querySelectorAll(). But that collection doesn’t have a style property. Instead, loop over all the links in the collection upon the click of the button and toggle the use of a CSS class.

// When the button is clicked...
document.querySelector("button").addEventListener("click", function(){
  // Find all the <a> elements and loop over the collection of them
  document.querySelectorAll("a").forEach(function(link){
    // Instead of working with inline styles (the style property),
    // just add or toggle the use of a pre-made CSS class. I'm using
    // toggle here, but if you just want the class added use .add("underline")
    // instead.
    link.classList.toggle("underline");
  });
});
a { text-decoration:none; }
.underline { text-decoration:underline; }
<a href="someURL">the text of the link</a> lorem ipsum <a href="someURL">the text of the link</a> lorem ipsum 2<a href="someURL">the text of the link</a> lorem ipsum 
<a href="someURL">the text of the link</a> lorem ipsum <a href="someURL">the text of the link</a> lorem ipsum <a href="someURL">the text of the link</a> lorem ipsum 
<a href="someURL">the text of the link</a> lorem ipsum 
<div>
  <button>Click to toggle underline</button>
</div>

Problem :

after an hour of trial and error with the creation of a simple script, I’m asking you for help. I would like to create a button, which after clicking on it will add an underline style to all a selectors on the website. I already wrote a simple function, but unfortunately it doesn’t work.
There is a large number of a selectors on the whole page, so I won’t send out the code of the whole page.

JS file:

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

HTML code:

<button onclick="underlineLinks()">Underline</button>

PHP code in functions.php file:

function underline_links() {
  wp_enqueue_script( 'js-file', get_stylesheet_directory_uri() . '/js/underline.js');
}
add_action('wp_enqueue_scripts', 'underline_links');

Comments

Comment posted by Taplar

querySelectorAll

Comment posted by stackoverflow.com/questions/10693845/…

stackoverflow.com/questions/10693845/…

Comment posted by Pointy

It’d be a lot easier to add a class to the

Comment posted by nsog8sm43x

OK, thank you for your help. And what would it be like if there had to be one button in the design ?

Comment posted by Lain

Use

Comment posted by nsog8sm43x

OK, what if I want the styles for selector “a” to be used as inline ?

Comment posted by Scott Marcus

@nsog8sm43x Then use the original inline code that you had

By

Leave a Reply

Your email address will not be published. Required fields are marked *