el objetivo de mi código es generar un nuevo enlace cada vez que se presiona "generar", para que pueda encontrar nuevas canciones para el tablero de geometría sin tener que enviar números de spam.
Probé la cadena a continuación, pero cada vez que se hacía clic en el botón, se agregaba un nuevo conjunto de números al final. deseo que el programa no requiera una actualización
document.querySelectorAll("a").forEach(link => link.setAttribute("href", link.getAttribute("href") + Math.floor(Math.random() * 111392.8) + 1)este es mi intento actual. Obtuve el objetivo de un nuevo número en cada botón presionado con una actualización, pero el prefijo de "https://www.newgrounds.com/audio/listen/" no se agregará al inicio.
window.onclick = () => { document.querySelectorAll("a").forEach(link => link.setAttribute("href", Math.floor(Math.random() * 111392.8) + 1) ); }; <title> Newgrounds Song Generator </title> <body> <h1>Click the button to visit a random song!</h1> <a href="https://www.newgrounds.com/audio/listen/" target="_blank"> <button>Generate</button> </a>¡No tenga un botón en un enlace!
El código puede ser mucho más simple con un formulario
const url = "https://www.newgrounds.com/audio/listen/"; document.getElementById("generate").addEventListener("submit", function() { const link = url + Math.floor(Math.random() * 111392.8) + 1; console.log(link) this.action = link; // SO does not allow a target="_blank" in a snippet }) <title> Newgrounds Song Generator </title> <h1>Click the button to visit a random song!</h1> <form id="generate" target="_blank"> <button type="submit">Generate</button> </form>O un enlace diseñado como un botón
const url = "https://www.newgrounds.com/audio/listen/"; document.getElementById("generate").addEventListener("click", function() { const link = url + Math.floor(Math.random() * 111392.8) + 1; console.log(link) this.href = link; // SO does not allow a target="_blank" in a snippet }) .button { font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; } <title> Newgrounds Song Generator </title> <h1>Click the button to visit a random song!</h1> <a class="button" id="generate" target="_blank" href="">Generate</a>Recomiendo almacenar el resto del dominio en una variable separada, así
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="CSS1.css"> <script> // Moved the href here to make it reusable easily const hrefBase = "https://www.newgrounds.com/audio/listen/" window.onclick = () => { document.querySelectorAll("a").forEach(link => link.setAttribute("href", hrefBase + Math.floor(Math.random() * 111392.8) + 1) ); }; </script> </head> <title> Newgrounds Song Generator </title> <body> <h1>Click the button to visit a random song!</h1> <a href="" target="_blank"> Generate </a> </body> </html>¡Espero que eso ayude!
Tienes algunos problemas con eso:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="CSS1.css"> </head> <title> Newgrounds Song Generator </title> <body> <h1>Click the button to visit a random song!</h1> <button id="listen"> Generate </button> </body> <script> const baseUrl = "https://www.newgrounds.com/audio/listen/"; document.getElementById("listen").onclick = () => { let a = document.createElement('a'); a.href = baseUrl + (Math.floor(Math.random() * 111392.8) + 1); a.target = '_blank'; a.click(); }; </script> </html>