[英]How to make a word inside a variable also a clickable link?
我目前正在練習 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,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23a29510' fill-opacity='0.32'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E"); } .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>
你只需要在分配innerHTML時添加一個帶有超鏈接的標簽
para.innerHTML='<a href="https://google.com">'+word[Math.floor(Math.random()*word.length)];+'</a>'
這是小提琴
您可以通過使 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,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23a29510' fill-opacity='0.32'%3E%3Cpath fill-rule='evenodd' d='M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z'/%3E%3C/g%3E%3C/svg%3E"); } .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>
一種簡單的方法是用錨標記替換var word 。
例如，
var word = ["<a href=\"LINK TO GOOGLE\"> City name </a>"]
使元素內部的按鈕可單擊，同時元素本身也可單擊
[英]Make a button inside an element clickable while the element itself is also clickable
在可點擊框內創建可點擊鏈接（在內的ActionLink <a href>）</a>
[英]Make clickable link inside clickable box (ActionLink inside <a href>)
如何使 bootstrap 3 Popover 處於懸停狀態和可點擊鏈接
[英]How to make bootstrap 3 Popover to be On Hover and Clickable Link
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.