HTML - 潮汐时间 - 根据用户输入更改源 URL答案

【问题标题】：HTML - tide times - change source url based on user inputHTML - 潮汐时间 - 根据用户输入更改源 URL
【发布时间】：2022-10-17 13:22:29
【问题描述】：

为什么：我的网站将潮汐时间作为一个小功能（因此不是主要功能）。

什么：作为潮汐时间功能的一部分，我想为用户提供一组“下拉”选项来选择一个位置，并且默认潮汐时间会随着用户的选择而更新。

为什么它不起作用：选择一个选项后，表格消失。它不应该消失。它应该使用所选位置进行更新。

希望得到一些帮助/指导。在过去的一周里，它一直让我发疯。

长总结：我正在将站点连接在一起，并且我有一个潮汐时间小部件/html sn-p。只有 sn-p 不提供用户更改位置的选项。我希望自定义 html 页面以包含下拉列表，并且选择的值替换 src url 位置。然后小部件更新更改（而不是整个页面）。

我在这里学到了很多东西。但我是新手——所以也许我违反了一些基本规则。

希望得到一些帮助/指导。在过去的一周里，它一直让我发疯。

我一直在研究，下面的代码就是我想出的。

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

【问题讨论】：

你能分享一下网站的网址吗？我们可以看看
我不能，我害怕。它的形状如此糟糕，到处都是想法和概念……那个功能只是它的一小部分……

标签： javascript html

【解决方案1】：

我已经使用https://github.com/krux/postscribe 的“postscribe”解决了这个问题。

我在<script>标签中使用来自cdn的postscribe：

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

那么<body>标签的内容如下：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。