Open html with parameter

Question

Question 1: I need to open a html file with one parameter (string).

The following code is just demo of large code. I made it to let you understand my requirement. Here is my code....

main.html

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets :</p>

<img src="http://www.w3schools.com/html/planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="mountain.html">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mountain.html">
  <area shape="circle" coords="124,58,8" alt="Venus" href="mountain.html">
</map>

</body>
</html>

mountain

<h2>Spectacular Mountain</h2>
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
<p id="demo"></p>

<script language="javascript" type="text/javascript"> 

function myFunction(arg) {
    this.name = arg;  
}

var x = new myFunction(name)  /*HERE NAME SHOULD BE Sun/Mercury/Venus clicked by user*/
document.getElementById("demo").innerHTML = x.name;


</script>
<input type="button" value="Back !" onclick="history.back(-1)" />
</body>
</html>

Here this.name = alt; How can I get "alt (Sun/Mercury/Venus)"clicked by user.

Question 2: IS there any better way instead of the following:

<input type="button" value="Back !" onclick="history.back(-1)" />

can you tell me why you are making it negative... – Shahgee Jul 04 '16 at 20:37 — Shahgee, Jul 04 '16 at 20:37

score 1 · Answer 1 · answered Jul 04 '16 at 20:28

1

1 - Would it not be better to do an onclick="function()" and call the function in the java script file, then set the text?

2 - And I don't personally know of any other way.

answered Jul 04 '16 at 20:28

Benjamin Rogers-Newsome

122
8

no i need to go in this way... it is just demo code. – Shahgee Jul 04 '16 at 20:33
You could pass the value of alt through the URL as a GET request and then pull that in the javascript in mountain and use it that way? – Benjamin Rogers-Newsome Jul 04 '16 at 20:41

score 1 · Answer 2 · answered Jul 04 '16 at 20:36

A very simple and basic implementation would be to pass the clicked area name as a query parameter on your link, like this :

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="mountain.html?clicked=Sun">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mountain.html?clicked=Mercury">
  <area shape="circle" coords="124,58,8" alt="Venus" href="mountain.html?clicked=Venus">
</map>

Then in your Javascript, replace the value of the p element with the query parameter, like so :

<script language="javascript" type="text/javascript"> 

window.onload = function() { // Wait for the page to load all DOM elements
  var explodedQueryParams = window.location.search.split('&');
  explodedQueryParams.forEach(function(param) { // Loop through query parameters
    var explodedParam = param.split('='); // Split on the '='
    if(explodedParam[0] === 'clicked') { // If it's the parameter we want
      document.getElementById("demo").innerHTML = explodedParam[1]; // Set the value to the p element
    }
  });
};

</script>

There would be more efficient way to do what you want to do, but I think, by reading your code, that you want the simplest way of doing it, so here it is.

Note that one could use URLSearchParams with a polyfill, to have a more robust way of parsing the query parameters. I kept it dependency-free here.

To answer your second question, there is nothing wrong in doing it this way in your case. This code is valid and works well.

Jake Sweeney · Accepted Answer · 2016-07-04T20:51:57.903

I used "sessionStorage" to set and get the name of the planet the user clicked the planet in the img. When a planet is clicked a javascript method is called that passes in the current object to the function. This variable can then be called by using sessionStorage.getItem("nameOfItem").

See the code below.

main.html

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets :</p>

<img src="http://www.w3schools.com/html/planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="mountain.html" onclick="javascript:setPlanetName(this)">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mountain.html" onclick="javascript:setPlanetName(this)">
  <area shape="circle" coords="124,58,8" alt="Venus" href="mountain.html" onclick="javascript:setPlanetName(this)">
</map>

<script>
    function setPlanetName(arg) {
        sessionStorage.setItem("name", arg.alt);
    }
</script>

</body>
</html>

mountain.html

<h2>Spectacular Mountain</h2>
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
<p id="demo"></p>

<script language="javascript" type="text/javascript"> 

var y = sessionStorage.getItem("name");
document.getElementById("demo").innerHTML = y;


</script>
<input type="button" value="Back !" onclick="history.back(-1)" />
</body>
</html>

As for your second question this seems to be the best way?

Hope this helps :)

You should use *code sample* when the code isn't supposed to be ran inside SO. — Emile Bergeron, Jul 04 '16 at 20:43

score 1 · Answer 4 · edited May 23 '17 at 11:58

main.html

<!DOCTYPE html>
<html>
<body>

    <p>Click on the sun or on one of the planets :</p>

    <img src="http://www.w3schools.com/html/planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

    <map name="planetmap">
        <area shape="rect" coords="0,0,82,126" alt="Sun" href="mountain.html?planet=Sun">
        <area shape="circle" coords="90,58,3" alt="Mercury" href="mountain.html?planet=Mercury">
        <area shape="circle" coords="124,58,8" alt="Venus" href="mountain.html?planet=Venus">
    </map>

</body>
</html>

mountain.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <h2>Spectacular Mountain</h2>
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
    <p id="demo"></p>

    <script language="javascript" type="text/javascript">
        function getQueryStringParam(name) {
            var url = window.location.href;
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }

        var planet = getQueryStringParam('planet');

        document.getElementById("demo").innerHTML = planet;
    </script>
    <input type="button" value="Back !" onclick="history.back(-1)" />
</body>
</html>

Getting the value from the querystring is simplest.

Regarding the back button - back is back, there's not much to be done there, you've already got it.

Thanks to a great answer for the querystring parameter retrieval: How can I get query string values in JavaScript? - just doctored it a bit for what was needed.

Open html with parameter

4 Answers4