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

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,");
}

.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>

CodePudding user response：

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

CodePudding user response：

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>"]

CodePudding user response：

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,");
}

.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>