如何使變數內的單詞也是可點擊的鏈接？-有解無憂

我目前正在練習 JavaScript 并嘗試為自己制作一個簡單的隨機城市名稱生成器。到目前為止，它運行良好，當您單擊按鈕“Cre?er plaatsnaam”（創建城市名稱）時，會出現城市名稱。但我喜歡添加一個可點擊的鏈接。因此，當出現隨機城市名稱并單擊它時，它會將您發送到 Google 地圖上的位置。到目前為止，我嘗試了一些東西，但沒有成功。希望這里有人可以向我點頭表示正確的方向。

這是我的代碼。

function gentext() {
  var word=['Aadorp', 'Aagtdorp', 'Aagtekerke', 'Aalbeek', 'Aalden', 'Aaldonk', 'Aalsmeer', 'Aalst', 'Aalsum', 'Aalten', ];
  var para=document.querySelector('p');
  para.innerHTML=word[Math.floor(Math.random()*word.length)];
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', sans-serif;
  background-color: #48f34a;
  background-image: url("data:image/svg xml,");
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 95vh;
}

.plaatsnaam {
  font-size: 3.5em;
  font-weight: 400;
  padding: 1rem 2rem;
  background-color: #dfffdcda;
  border-radius: 5px;
  margin: 2rem;
}

a.button {
  display: inline-block;
  padding: 1em 2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.15em;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.2em;
  color: #fff;
  background-color: #3369ff;
  box-shadow: inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
  text-align: center;
  position: relative;
  cursor: pointer;
}

a.button:active {
  top:0.1em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Willekeurige plaatsnaam</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400&display=swap" rel="stylesheet">
</head>
<body>
    
    <div class="container">
        <p class="plaatsnaam"></p>
        <a class="button" onclick="gentext();">Cre?er plaatsnaam</a>
    </div>

<footer>
    <p><em>Made by:</em>    Jaap Bakker</p>
</footer>

<script src="app.js"></script>
</body>
</html>

uj5u.com熱心網友回復：

你只需要在分配innerHTML時添加一個帶有超鏈接的標簽

para.innerHTML='<a href="https://google.com">' word[Math.floor(Math.random()*word.length)]; '</a>'

這是小提琴

uj5u.com熱心網友回復：

您可以通過使 JSON 物件參考下面來做到這一點

function gentext() {
  var word=['Aadorp', 'Aagtdorp', 'Aagtekerke'];
  var links = {'Aadorp':"link to aadorp",'Aagtdorp':"link to aagtdrop" , 'Aagtekerke':'link to aagte...'}  //json object containig links to respective cities
  var para=document.querySelector('p');
  var random_num = Math.floor(Math.random()*word.length)
  var random_city = word[random_num]
  var link_to_city = links[random_city]

  para.innerHTML = random_city   " <a href='"  link_to_city   "'>google link"
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', sans-serif;
  background-color: #48f34a;
  background-image: url("data:image/svg xml,");
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 95vh;
}

.plaatsnaam {
  font-size: 3.5em;
  font-weight: 400;
  padding: 1rem 2rem;
  background-color: #dfffdcda;
  border-radius: 5px;
  margin: 2rem;
}

a.button {
  display: inline-block;
  padding: 1em 2em;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.15em;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.2em;
  color: #fff;
  background-color: #3369ff;
  box-shadow: inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
  text-align: center;
  position: relative;
  cursor: pointer;
}

a.button:active {
  top:0.1em;
}

<div class="container">
    <p class="plaatsnaam"></p>
    <a class="button" onclick="gentext();">Cre?er plaatsnaam</a>
</div>

<footer>
<p><em>Made by:</em>    Jaap Bakker</p>
</footer>

uj5u.com熱心網友回復：

一種簡單的方法是var word用錨標簽替換 in 中的單詞。

例如，

var word = ["<a href=\"LINK TO GOOGLE\"> City name </a>"]

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/348536.html

標籤：javascript html 变量网址

上一篇：我應該使用db.collection.distinct()嗎？

下一篇：如何使用錨點使用URL引數