1

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');
Jeff Berlin
  • 590
  • 6
  • 17
nsog8sm43x
  • 329
  • 5
  • 14
  • 1
    `querySelectorAll` returns an array like result. You have to loop over them to access each one of their `style` properties and set them individually. – Taplar May 26 '20 at 17:50
  • 2
    https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return <= picked the wrong duplicate. this should be the duplicate – Taplar May 26 '20 at 17:51
  • 2
    It'd be a lot easier to add a class to the `` and use a CSS rule. – Pointy May 26 '20 at 17:52

2 Answers2

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>
Lain
  • 3,657
  • 1
  • 20
  • 27
0

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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • OK, what if I want the styles for selector "a" to be used as inline ? – nsog8sm43x May 26 '20 at 18:21
  • @nsog8sm43x Then use the original inline code that you had `link.style.textDecoration = "underline";`, but unless you have some specific reason for needing that, it is not advised. – Scott Marcus May 26 '20 at 18:41