在每次按下链接后添加新的随机数

Question

我的代码的目标是在每次按下“生成”时生成一个新链接，这样我就可以找到几何冲刺的新歌曲，而不必发送垃圾邮件号码。

我已经尝试了下面的字符串，但是每次单击按钮时，它都会在末尾附加一组新数字。 我希望程序不需要刷新

document.querySelectorAll("a").forEach(link =>
     link.setAttribute("href", link.getAttribute("href") + Math.floor(Math.random() * 111392.8) + 1)

这是我目前的尝试。 我的目标是在每次按下按钮时都刷新一个新号码，但“https://www.newgrounds.com/audio/listen/”的前缀不会附加到开头。

 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>

Answer 1

链接中没有按钮！

使用表单代码可以简单得多

 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>

或样式为按钮的链接

 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>

Answer 2

我建议将域的其余部分存储在一个单独的变量中，就像这样

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

希望这会有所帮助！

Answer 3

你有一些问题：

• 您不应该在head标签内使用script标签。
• 您不应该在锚标签内使用按钮标签。
• 您不应该使用window.onclick ，因为无论您单击何处，它都会激活该功能。

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