the goal of my code is to generate a new link each time "generate" is pressed, so that i can find new songs for geometry dash without having to spam numbers.
i have tried the string below but every time the button were to be clicked, it would append a new set of numbers on the end. i wish for the program to not require a refresh
document.querySelectorAll("a").forEach(link =>
link.setAttribute("href", link.getAttribute("href") + Math.floor(Math.random() * 111392.8) + 1)
this is my current attempt. i have gotten the goal of a new number on every button press with a refresh but the prefix of "https://www.newgrounds.com/audio/listen/" won't append to the start.
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>Don't have a button in a link!
The code can be much simpler with a form
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>Or a link styled as a button
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>I'd recommend storing the rest of the domain in a separate variable, like so
<!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>
Hopefully that helps!
You have some problems with it:
<!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>