Question

我已经制作了一个随机品牌生成器，您点击一个按钮就会返回一个品牌。如果点击后生成的每个品牌名称都在新标签中打开品牌网站，我会喜欢它。我不确定这是否可行，如果可能，是否应该在HTML或javascript中完成。谢谢你的帮助！

HTML

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brandomiser</title>
    <link href='https://fonts.googleapis.com/css?family=Martel:900' rel='stylesheet' type='text/css'>
    <link href="main.css" rel="stylesheet" type="text/css">
    <link href="/downloads/favicon.ico" />
  </head>

  <body>
  <div class="row">
    <div id="bar" class="col-12 col-t-12 col-d-12 col-b-12">
      <p id="brand">Brandomiser</p>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-t-12 col-d-12 col-b-12">
      <h1 id="myRandomDiv"></h1>
    </div>
  </div>

  <div class="row">
    <div id="buttonmiddle" class="col-12 col-t-12 col-d-12 col-b-12">
      <button type="button" id="myButton">Hit me.</button>
    </div>
  </div>
  <script src="thing.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body> 
  </html>

的Javascript

var randomStrings = [
    "Endsleigh",
    "Colgate",
    "Shell",
    "Tesco",
    "Swatch",
    "Vanish",
  ];

  var randomDiv = document.getElementById("myRandomDiv");

  document.getElementById("myButton").addEventListener("click", generate);

  function generate() {
    randomIndex = Math.ceil((Math.random() * randomStrings.length - 1));
    newText = randomStrings[randomIndex];
    randomDiv.innerHTML = newText;
  }

  generate();

Answer 1

使用

{{1}}

Answer 2

您正在寻找window.open(url)：

  function generate() {
    randomIndex = Math.ceil((Math.random() * randomStrings.length - 1));
    newText = randomStrings[randomIndex];
    window.open('http://blabla.com/' + newText);
  }

同样Math.random会返回[0,1)范围内的浮点数（从不包含1），因此您可以简单地使用代码升级：

randomIndex = Math.floor(Math.random() * randomStrings.length);

Answer 3

使用正确的方法在Javascript中创建元素：

document.createElement("a")

这样的事情：

＆＃13;

var randomStrings = [
  "Endsleigh",
  "Colgate",
  "Shell",
  "Tesco",
  "Swatch",
  "Vanish",
];

var randomDiv = document.getElementById("myRandomDiv");

document.getElementById("myButton").addEventListener("click", generate);

function generate() {
  randomIndex = Math.ceil((Math.random() * randomStrings.length - 1));
  newText = randomStrings[randomIndex];

  randomDiv.innerHTML = ""; // Clean the previous content.
  var link = document.createElement("a"); // Create the <a> tag.
  link.href = "http://" + newText + ".com/"; // Set the href attribute for the new link.
  link.target = "_blank"; // Set the target attribute for the new link.
  link.innerText = newText; // Set the content.
  randomDiv.appendChild(link); // Append your new <a> tag to the randomDiv.
}

generate();

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brandomiser</title>
  <link href='https://fonts.googleapis.com/css?family=Martel:900' rel='stylesheet' type='text/css'>
  <!--<link href="main.css" rel="stylesheet" type="text/css">-->
  <link href="/downloads/favicon.ico" />
</head>

<body>
  <div class="row">
    <div id="bar" class="col-12 col-t-12 col-d-12 col-b-12">
      <p id="brand">Brandomiser</p>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-t-12 col-d-12 col-b-12">
      <h1 id="myRandomDiv"></h1>
    </div>
  </div>

  <div class="row">
    <div id="buttonmiddle" class="col-12 col-t-12 col-d-12 col-b-12">
      <button type="button" id="myButton">Hit me.</button>
    </div>
  </div>
  <!--<script src="thing.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>

</html>

＆＃13;

如何使随机生成的结果（javascript）成为超链接？

3 个答案: