How to make a word inside a variable also a clickable link?

user_14795628 0
Viewed 61

I'm currently practicing with JavaScript and trying to make a simple random city name generator for myself. 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. 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. 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>

url html variables javascript
3 Answers

You only have to add a tag with hyperlink in the while assigning innerHTML

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

Here is the Fiddle

user_112204710

You can do it by making JSON object refer below

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>

Admin1

One easy way to do it would be by replacing the words in var word with anchor tags.

for example,

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