我 go 如何创建这个跳转页面？
[英]How would I go about creating this jump page?
问题描述
Note: I'm a total novice at any coding.
注意：我在任何编码方面都是新手。 I'm just a dumb amature graphic designer.
I'm trying to create this page that lets input something into a text field, and it applies it to defined URLS attached to buttons, that will bring me to those pages.我正在尝试创建此页面，允许在文本字段中输入内容，并将其应用于附加到按钮的已定义 URL，这将带我进入这些页面。 Since I struggle to describe it, please see this visual: https://i.stack.imgur.com/ZplRK.jpg由于我很难描述它，请看这张图片： https://i.stack.imgur.com/ZplRK.jpg
I've tried co-opting some scripts for similar problems, but with no luck.我试过为类似的问题选择一些脚本，但没有成功。 (See below for examples before I edited them ). （在我编辑它们之前，请参阅下面的示例）。 I included them to see if I was on the right track whatsoever.我把它们包括在内是为了看看我是否在正确的轨道上。 I know I'm gonna have an issue with multiple functions, probably?我知道我可能会遇到多个功能的问题？
<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">
That's where I at.那就是我所在的地方。 I'm just tired of typing the same long URLs all day at work, and messing up more than half the time.我只是厌倦了在工作中整天输入相同的长 URL，而且一半以上的时间都搞砸了。 I have no clue what the solution is - Javascript?我不知道解决方案是什么 - Javascript？ HTML? HTML？ CSS? CSS？ Just trying to seek the DIY answer before looking on how to hire someone to make it.在寻找如何雇用某人来制作它之前，只是试图寻找 DIY 答案。 Which I have no clue how to do either but that's another question for later.我不知道该怎么做，但这是以后的另一个问题。
Thanks for helping / apologies for possibly super dumb questions.感谢您为可能超级愚蠢的问题提供帮助/道歉。
2 个解决方案
解决方案1
0 2021-04-18 19:21:38
You could do something like the following:您可以执行以下操作：
// 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 elem.net 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>
解决方案2
0 2021-04-18 19:24:06
Note: I'm a total novice at any coding.
I'm trying to create this page that lets input something into a text field, and it applies it to defined URLS attached to buttons, that will bring me to those pages.我正在尝试创建此页面，该页面允许在文本字段中输入内容，并将其应用于附加到按钮的已定义 URL，这会将我带到这些页面。 Since I struggle to describe it, please see this visual: https://i.stack.imgur.com/ZplRK.jpg由于我很难描述它，请看这个视觉效果： https://i.stack.imgur.com/ZplRK.jpg
I've tried co-opting some scripts for similar problems, but with no luck.我已经尝试为类似的问题选择一些脚本，但没有运气。 (See below for examples before I edited them ). （在我编辑它们之前，请参见下面的示例）。 I included them to see if I was on the right track whatsoever.我包括他们，看看我是否走在正确的轨道上。 I know I'm gonna have an issue with multiple functions, probably?我知道我可能会遇到多个功能的问题，可能吗？
<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">
That's where I at.那就是我所在的地方。 I'm just tired of typing the same long URLs all day at work, and messing up more than half the time.我只是厌倦了整天在工作中输入相同的长 URL，并且有一半以上的时间搞砸了。 I have no clue what the solution is - Javascript?我不知道解决方案是什么 - Javascript？ HTML? HTML？ CSS? CSS？ Just trying to seek the DIY answer before looking on how to hire someone to make it.只是在寻找如何雇用某人之前尝试寻求 DIY 答案。 Which I have no clue how to do either but that's another question for later.我也不知道该怎么做，但这是以后的另一个问题。
Thanks for helping / apologies for possibly super dumb questions.感谢您为可能超级愚蠢的问题提供帮助/道歉。
解决方案3
-1 2021-04-18 19:27:46
In your code you are working with only the "main" button as I can see (as it goes to viewclientdetails).在您的代码中，您只使用了我所看到的“主”按钮（因为它转到 viewclientdetails）。 You are missing a "/" sign after var initial .您在var initial之后缺少“/”符号。 So, assuming that you can implement the same functionality of the main button to the other buttons, here's what you can do:因此，假设您可以将主按钮的相同功能实现到其他按钮，您可以执行以下操作：
<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
You cannot have an input type="submit" here, since you will need four buttons.您不能在此处使用input type="submit" ，因为您将需要四个按钮。 Submit works like a form submission.提交作品类似于表单提交。 Add four buttons, then for each button's onClick property add the desired redirect url. You will need to get the value for the input field using an ID tag.添加四个按钮，然后为每个按钮的 onClick 属性添加所需的重定向 url。您需要使用 ID 标记获取输入字段的值。
An example of what I am trying to say is given below:下面给出了我想说的一个例子：
<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> There are much better ways to implement this, but this is a very simple implementation.有很多更好的方法来实现这一点，但这是一个非常简单的实现。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.