我将如何创建这个跳转页面？

如何解决我将如何创建这个跳转页面？

注意：我在任何编码方面都是新手。我只是一个愚蠢的业余平面设计师。我只创建了一个页面，可以让我复制我不得不整天在笔记中留下的最常见的短语。我挣扎

我正在尝试创建这个页面，允许在文本字段中输入一些内容，并将其应用于附加到按钮的已定义 URL，这将使我进入这些页面。由于我很难描述它，请看这个视觉效果：https://i.stack.imgur.com/ZplRK.jpg

我曾尝试为类似的问题选择一些脚本，但没有成功。（在我编辑它们之前，请参阅下面的示例）。我把它们包括在内，看看我是否在正确的轨道上。我知道我可能会遇到多个功能的问题？

<script type="javascript">
function goToPage(var url = '')
{
    var initial = "http://example.com";
    var extension = "html";

    window.location(initial+url+extension);
}
</script>

<form name="something" action="#">
Label <input type="text" name="url" value="" onchange="goToPage(this.value)">
</form>

<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails";
var extension = "";

window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">

这就是我所在的地方。我只是厌倦了整天在工作中键入相同的长 URL，并且有一半以上的时间都搞砸了。我不知道解决方案是什么 - Javascript？ HTML？ CSS？在寻找如何雇用某人来制作它之前，只是试图寻求 DIY 的答案。我也不知道该怎么做，但这是以后的另一个问题。

感谢您的帮助/对可能非常愚蠢的问题表示歉意。

解决方法

您可以执行以下操作：

// grab the input element
const input = document.getElementById("cmsId");

// grab all links that need to be updated accordingly
// when value inside input element changes
const links = document.querySelectorAll("a");

// create a handler that listens for changes when
// you type some text into the input element
input.addEventListener("input",(event) => {
  // grab value inside input elemenet
  const value = event.target.value;

  // iterate through all links and update
  // the inner text + href attribute accordingly
  // NOTE: `baseUrl` for each link is stored in a
  // `data-*` attribute
  links.forEach((link) => {
    const baseUrl = link.dataset.url;
    const url = baseUrl + value;

    link.innerText = url;
    link.href = url;
  });
});

<!-- Use a simple input element here,no need for a form -->
<div>CMS ID: <input id="cmsId" type="text" /></div>

<div>
  <!-- No need to create buttons,simple anchor elements will work just fine -->
  <a
    id="main"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewclientdetails/"
  >
    https://cmss.company.com/client/viewclientdetails/
  </a>
</div>
<div>
  <a
    id="notes"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewnotes/"
  >
    https://cmss.company.com/client/viewnotes/
  </a>
</div>
<div>
  <a
    id="docs"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/documentsall/"
  >
    https://cmss.company.com/client/documentsall/
  </a>
</div>
<div>
  <a
    id="activity"
    href="#"
    target="_blank"
    data-url="https://cmss.company.com/client/viewactivityledger/"
  >
    https://cmss.company.com/client/viewactivityledger/
  </a>
</div>

在您的代码中，您只使用“主”按钮，正如我所看到的（因为它转到 viewclientdetails）。 var initial 后面缺少“/”符号。因此，假设您可以为其他按钮实现与主按钮相同的功能，那么您可以执行以下操作：

<script type="text/javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails/"; //I added the slash 

var extension = "";

window.location(initial+url+extension);
}
</script>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO"> //you need 4 buttons here

此处不能有 input type="submit"，因为您需要四个按钮。提交像表单提交一样工作。添加四个按钮，然后为每个按钮的 onClick 属性添加所需的重定向 URL。您需要使用 ID 标签获取输入字段的值。

我想说的一个例子如下：

    <script type="text/javascript">
    function onMainButtonClicked()
    {
    var cmsid= document.getElementById("cmsID").value;
    var initial = "https://cms.example.com/client/viewcasedetails/"; //I added the slash 
    
    var extension = "";
    
    window.location(initial+cmsid+extension);
    }
    function onNotesButtonClicked()
    {
    ...
    }
    function onDocsButtonClicked()
    {
    ...
    }
    function onActivityButtonClicked()
    {
    ...
    }
    </script>
    <TITLE>Redirect 1</TITLE>
    <BASE HREF="https://cms.example.com/client/viewcasedetails">
    </HEAD>
    <BODY>
    <P>
    <FORM name="jump" action="#">
    CMS ID:
    <INPUT type="text" id="cmsID" name="url" value="">
    <button onclick="onMainButtonClicked()">Main</button>
    <button onclick="onNotesButtonClicked()">Notes</button>
    <button onclick="onDocsButtonClicked()">Docs</button>
    <button onclick="onActivityButtonClicked()">Activity</button>

有很多更好的方法来实现这一点，但这是一个非常简单的实现。