¿Cómo agrego un subrayado para todos los enlaces en el sitio web cuando hago clic en el botón?

Question 1

después de una hora de prueba y error con la creación de un script simple, les pido ayuda. me gustaria crear un buttonque después de hacer clic en él agregará un estilo de subrayado a todos a selectores en el sitio web. Ya escribí una función simple, pero desafortunadamente no funciona. Hay un gran número de a selectores en toda la página, por lo que no enviaré el código de toda la página.

archivo JS:

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

Código HTML:

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

Código PHP en el archivo functions.php:

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

Question 2

No es realmente una explicación de la causa del problema en cuestión, pero ya hay suficientes aquí.

Hacerlo con css en todo el documento o cuerpo parece más simple que recorrer cada elemento por separado.

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>

En general, trataría de evitar el uso de la style properties de HTMLElements e intente trabajar con clases/atributos en su lugar.

Edite, según lo solicitado:

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>

Question 3

Está intentando agregar un estilo en línea a la colección de enlaces devueltos por .querySelectorAll(). Pero esa colección no tiene un style propiedad. En su lugar, recorra todos los enlaces de la colección. al hacer clic en el botón y alternar el uso de una clase CSS.

// 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="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum <a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 2<a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 
<a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum <a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum <a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 
<a href="https://stackoverflow.com/questions/62028300/someURL">the text of the link</a> lorem ipsum 
<div>
  <button>Click to toggle underline</button>
</div>

Edite, según lo solicitado:

¿Ha sido útil esta solución?