Is there way to insert variable in string? (html)

Question

I have not learend any other program language and I started learning html today, I am making program that show random place on google map google map link is this and https://www.google.co.kr/maps/@36.3904052,127.331469,18.09z I wnat to give link like (https://www.google.co.kr/maps/@latitude,longitude,18.09z) this

<!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>random palce</title>
</head>
<body style="background-color:#FAD0C9;">
    <div style="text-align:center">
        <strong>
            <p style="font-size: 70px; color:#6E6E6D">click the button</p>
        </strong>
        <script>
            var random1 = (Math.floor(Math.random() * (381601797 - 341601796)) + 341601796)/10000000;
            document.write( '<p>' + random1 + '</p>' );
            var random2 = (Math.floor(Math.random() * (1289677998 - 1262365489)) + 1262365489)/10000000;
            document.write( '<p>' + random2 + '</p>' );
         </script>
    <button onclick="location.href='https://www.google.co.kr/maps/'
    " style="width: 350px; height: 150px; font-size: 40px; background-color:#D64161; color:#364b44; border:none; ">random place</button>
    </div>
</body>

this is code I made I want to edit <button onclick="location.href='https://www.google.co.kr/maps/' this part to show link like (https://www.google.co.kr/maps/@latitude,longitude,18.09z)

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — ripytide
– ripytide, Commented Jan 12, 2022 at 16:56
What you have inside <script> tags is JavaScript code. You will be able to manipulate DOM elements when you learn enough of it. — PM 77-1
– PM 77-1, Commented Jan 12, 2022 at 17:00

James · Accepted Answer · 2022-01-12 17:06:21Z

Firstly, the onclick event is Javascript, not html.

Then, you could use Template literals to insert variable in a string or an url. Also, I would not suggest you to write long Javascript code in onclick. Use addEventListener in script instead.

Template literals are literals delimited with backticks (`), allowing embedded expressions called substitutions.

*I don't really know what the request url format for google map should look like, but directly write coordinates seems to be wrong. You have to figure it out by yourself.

var random1 = (Math.floor(Math.random() * (381601797 - 341601796)) + 341601796) / 10000000;
document.write('<p>' + random1 + '</p>');
var random2 = (Math.floor(Math.random() * (1289677998 - 1262365489)) + 1262365489) / 10000000;
document.write('<p>' + random2 + '</p>');
document.querySelector('button').addEventListener('click', function() {
  location.href = `https://www.google.co.kr/maps/${random1+random2}`

})

<!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>random palce</title>
</head>

<body style="background-color:#FAD0C9;">
  <div style="text-align:center">
    <strong>
            <p style="font-size: 70px; color:#6E6E6D">click the button</p>
        </strong>

    <button style="width: 350px; height: 150px; font-size: 40px; background-color:#D64161; color:#364b44; border:none; ">random place</button>
  </div>
</body>

Collectives™ on Stack Overflow

Is there way to insert variable in string? (html)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related