adding new random number after a link on every press-CodePudding

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>

CodePudding user response：

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  id="generate" target="_blank" href="">Generate</a>

CodePudding user response：

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!

CodePudding user response：

You have some problems with it:

You shouldn't use script tag inside the head tag.
You shouldn't use button tag inside an anchor tag.
You shouldn't use window.onclick because it will activate the function no matter where you click.

<!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>