Question

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

（上部是Page，中间部分是调试控制台，下部是我的源代码）

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

Answer 1

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

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

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

Example

Answer 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";

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

Answer 4

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

window.onload = function() {}

或

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

Answer 5

AB CD EF变量未定义。

将您的脚本移到html内容下方。它会像这样

userInput

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

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

5 个答案: