如何根据文本框值创建链接？答案

【问题标题】：How to create a link based on textbox value?如何根据文本框值创建链接？
【发布时间】：2015-05-26 08:21:35
【问题描述】：

我正在尝试根据 id="serie" 文本框中的内容更改链接的 href。如您所见，Firefox 告诉我el 为空。这里出了什么问题？

（上半部分是Page，中半部分是debug-console，下半部分是我的源代码）

<html>
    <head>
        <script>
            var el = document.getElementById('serie');
            var lnk = document.getElementById('link');
            el.onchange = el.onkeyup = function() {lnk.href = "http://bs.infinibrain.net/" + userInput + ".xml";};
        </script>
    </head>
    <body>
        <h1>Anleitung</h1>
        1. <a href="index.xml" target="_blank">Hier</a> die id eurer Serie suchen (Leider sind noch nicht alle aufgelistet)<br/>
        2. dann id hier eingeben: <input id="serie" /><br/>
        3. und <a href="#" id="link">hier</a> die links raussuchen <br/>
    </body>
</html>

【问题讨论】：

你能做一个jsFiddle吗？
你会在这里发布你的代码而不是图片。
jsfiddle 不适合我 :(
问题是你的 javascript 代码在你的 html 页面完全加载之前运行，如果你将脚本移动到正文的下部它会起作用;-)
所有答案都不起作用...

标签： javascript html onchange getelementbyid onkeyup

【解决方案1】：

您需要使用window.onload，因为您的脚本在 DOM 加载之前运行

window.onload = function () {
   // your code 
}

或将脚本放在</body> 之前

Example

【讨论】：

【解决方案2】：

您甚至在加载之前就尝试访问element。将script 放在body 的末尾。

    <html>
    <body>
        <h1>Anleitung</h1>
        1. <a href="index.xml" target="_blank">Hier</a> die id eurer Serie suchen (Leider sind noch nicht alle aufgelistet)<br/>
        2. dann id hier eingeben: <input id="serie" /><br/>
        3. und <a href="#" id="link">hier</a> die links raussuchen <br/>
        <script>
            var el = document.getElementById('serie');
            var lnk = document.getElementById('link');
            el.onchange = el.onkeyup = function() {lnk.href = "http://bs.infinibrain.net/" + userInput + ".xml";};
        </script>
    </body>
</html>

另外你没有定义userInput，应该是el.value：

lnk.href = "http://bs.infinibrain.net/" + el.value + ".xml";

【讨论】：

@Paedow 我更新了我的答案。工作正常见HERE。

【解决方案3】：

在加载页面之前正在评估您的脚本，这意味着 html DOM 尚不可用。您需要做的是在窗口的load 事件中添加您的脚本。当页面完全加载时触发此事件：

<script>
    window.addEventListener("load", function () {
        var el = document.getElementById('serie');
        var lnk = document.getElementById('link');
        el.onchange = el.onkeyup = function() {lnk.href = "http://bs.infinibrain.net/" + userInput + ".xml";};
    });
</script>

【讨论】：

还是不行。我把它放在

【解决方案4】：

您需要使用文档DOMContentLoaded 或window.onload。

window.onload = function() {}

或

document.addEventListener("DOMContentLoaded", function() {})

【讨论】：

【解决方案5】：

userInput 变量未定义。

并将您的脚本移动到您的 html 内容下方。会是这样的

<html>
<head>

</head>
<body>
    <h1>Anleitung</h1>
    1. <a href="index.xml" target="_blank">Hier</a> die id eurer Serie suchen (Leider sind noch nicht alle aufgelistet)<br/>
    2. dann id hier eingeben: <input id="serie" /><br/>
    3. und <a href="#" id="link">hier</a> die links raussuchen <br/>

<script>
var el = document.getElementById('serie');
var lnk = document.getElementById('link');
el.onchange = function() {
  userInput = el.value;
  lnk.href = "http://bs.infinibrain.net/" + userInput + ".xml";};
    </script>
  </body>
</html>

不允许在给出答案后更改问题。

【讨论】：

刚刚改了个更合适的标题