HTML - tide times - change source url based on user input-CodePudding

Why: My site will have tide times as a small feature (so not the primary feature).

What: As part of that tide times feature, I want to provide the user a 'drop down' set of options to select a location and the default tide times update with the users selection.

Why it's not working: After selecting an option, the table disappears. It should not disappear. It should update with the chosen location.

Would love some help/direction on this. It's been driving me crazy for the past week now.

Long summary: I'm bolting together the site and I have a tide time widget / html snippet. Only the snippet doesn't come with the option for a user to change the location. I hope to customise the html page to include a drop down list and the selected value replace the src url location. Then the widget updates on the change (not the whole page).

I've been learning lots on here. But I am a novice - so maybe there are basic rules I am breaking.

Would love some help/direction on this. It's been driving me crazy for the past week now.

I've been researching and the code below is what I came up with.

<select onChange="ChangeLocation(value)">
  <option value="-">Select region</option>
  <option value="barry">Barry</option>
  <option value="aldeburgh">Aldeburgh</option>
</select>

 
 <script type="text/javascript">
      function ChangeLocation(value)
      {
          var s = document.createElement("script");
          s.type = "text/javascript";
          s.src = "https://www.tidetimes.org.uk/"   value   "-tide-times.js";
          s.id = "tidetable";
          s.async = true;
          document.getElementById("output").innerHTML = "";
          document.getElementById("output").appendChild(s);
         
      }
  </script>
  
  
<div id="output">
    <script id="tidetable" type="text/javascript" src="https://www.tidetimes.org.uk/aldeburgh-tide-times.js"></script>
</div>

CodePudding user response：

I have solved this using "postscribe" from https://github.com/krux/postscribe.

I'm using postscribe from the cdn by using it in the <script> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"></script>

Then, the content of the <body> tag as following:

<select onChange="ChangeLocation(value)">
    <option value="-">Select region</option>
    <option value="barry">Barry</option>
    <option value="aldeburgh">Aldeburgh</option>
</select>


<script type="text/javascript">
    function ChangeLocation(value) {

        var s = document.createElement("script");

        s.src = "https://www.tidetimes.org.uk/"   value   "-tide-times.js";

        document.getElementById("output").innerHTML = "";

        postscribe('#output', s.outerHTML);

    }
</script>

<div id="output"></div>