根据用户输入重定向答案

【问题标题】：Redirect based on user input根据用户输入重定向
【发布时间】：2017-02-06 08:35:57
【问题描述】：

我有 20 个不同的页面。假设页面的ID例如：mysite.com/page1，mysite.com/page2等等......

我需要创建一个输入字段，用户可以在其中输入数字，例如，如果他输入数字 16，它将重定向到mysite.com/page16。

我相信这可以通过 JavaScript 实现。有人有什么建议吗？

【问题讨论】：

到目前为止你做了什么？

【解决方案1】：

window.onload = function() {
  document.getElementById('btn').onclick = function()
  {
    window.location.href = "http://www.yourdomain.com/page"+document.getElementById("url").value
  };
}

<input id="url" value="">
<button id="btn">Go!</button>

【讨论】：

您的解决方案看起来很棒，并且在代码 sn-p 中运行良好，但是当我尝试在空的 html 文档中对其进行测试时，它根本不起作用。难道我做错了什么？这是截图：postimg.org/image/ymacsuflt
嗯。当您单击按钮时，请在浏览器中向我显示控制台。你也可以删除 jquery。
控制台说 Uncaught TypeError: Cannot set property 'onclick' of null at index.html:7
我想我找到了解决方案：<script> window.onload = function(){ document.getElementById('btn').onclick = function() { window.location.href = "http://www.yourdomain.com/page"+document.getElementById("url").value }; }; </script>
如何验证空字段？ “必需”显示错误，但即使该字段为空，它仍会将用户重定向到第一页？

【解决方案2】：

你可以使用 window.redirect 到你想要的页面

var input_number = document.getElementById('input_id').value
url = "mysite.com/page" + input_number;
window.location=url;

其中input_id是你输入框的id

【讨论】：

【解决方案3】：

在 vanilla JavaScript（无库）中，您可以使用以下脚本 (ES6)。

let input = document.querySelector('#input');
input.addEventListener('change', event => {
  var url = `mysite.com/page${input.value}`;
  alert(url);
  window.location = url;
});

&lt;input id="input" type="number" name="page" min="1" max="16" value="0"&gt;&lt;/input&gt;

【讨论】：