如何使变量中的单词也是可点击的链接？
[英]How to make a word inside a variable also a clickable link?
问题描述
I'm currently practicing with JavaScript and trying to make a simple random city name generator for myself.
我目前正在练习 JavaScript 并尝试为自己制作一个简单的随机城市名称生成器。 It works well so far and when you click on the button "Creëer plaatsnaam" (Create name of city) the name of a city appears.到目前为止，它运行良好，当您单击按钮“Creëer plaatsnaam”（创建城市名称）时，会出现城市名称。 But I like to add a clickable link to that.但我喜欢添加一个可点击的链接。 So that when the random name of a city appears and you click on it, it will send you to the location on Google Maps.因此，当出现随机城市名称并单击它时，它会将您发送到 Google 地图上的位置。 I tried a few things so far but without success.到目前为止，我尝试了一些东西，但没有成功。 Hopefully someone here can nod me into the right direction.希望这里有人可以向我点头表示正确的方向。
This is my code.这是我的代码。
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>
3 个解决方案
解决方案1
1 2021-11-04 16:17:23
解决方案2
1 2021-11-04 16:24:38
You can do it by making JSON object refer below您可以通过使 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>
解决方案3
0 2021-11-04 16:19:54
One easy way to do it would be by replacing the words in var word with anchor tags.一种简单的方法是用锚标记替换var word 。
for example,例如，
var word = ["<a href=\"LINK TO GOOGLE\"> City name </a>"]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使元素内部的按钮可单击，同时元素本身也可单击 - 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>)
Javascript：如何在变量可点击内创建图像？ - Javascript: how do I make an image inside a variable clickable?
如何使变量中的文本可点击 - how to make texts in variable clickable
如何使标签内的锚链接不可点击或禁用？ - How do you make an anchor link inside tag non-clickable or disabled?
如何使用SVG地图形状制作可点击链接 - how to make clickable link with SVG map shapes
如何使父链接在metisMenu中可点击 - How to make parent link clickable in metisMenu
如何使整个 div 可点击（进入链接）？ - How to make entire div clickable(into a link)?
Vuetify-如何使文本区域中的链接可点击？ - Vuetify- How to make a link in the textarea clickable?
如何使 bootstrap 3 Popover 处于悬停状态和可点击链接 - How to make bootstrap 3 Popover to be On Hover and Clickable Link
相关标签