如何根据文本框值创建 link？

Question

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

（上半部分是页面，中半部分是调试控制台，下半部分是我的源代码）

<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

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

window.onload = function() {}

或

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

Answer 4

在加载页面之前正在评估您的脚本，这意味着 html DOM 尚不可用。您需要做的是在 window 的 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 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>

顺便说一下，不允许在给出答案后更改问题。

如何根据文本框值创建 link？

How to create a link based on textbox value?

html

javascript

onchange

getelementbyid

onkeyup