Javascript 如何基于文本框值创建链接？_Javascript_Html_Onchange_Getelementbyid_Onkeyup

Javascript 如何基于文本框值创建链接？

javascript html

Javascript 如何基于文本框值创建链接？,javascript,html,onchange,getelementbyid,onkeyup,Javascript,Html,Onchange,Getelementbyid,Onkeyup,我正试图根据文本框中的内容，用id=“serie”更改链接的href。如您所见，Firefox告诉我，el为空。这里出了什么问题（上部是页面，中部是调试控制台，下部是我的源代码） var el=document.getElementById（'serie'）； var lnk=document.getElementById（'link'）； el.onchange=el.onkeyup=function（）{lnk.href=”http://bs.infinibrain.net/“+user

我正试图根据文本框中的内容，用

id=“serie”

更改链接的href。如您所见，Firefox告诉我，

el

为空。这里出了什么问题

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


var el=document.getElementById（'serie'）；
var lnk=document.getElementById（'link'）；
el.onchange=el.onkeyup=function（）{lnk.href=”http://bs.infinibrain.net/“+userInput+”.xml”；}；
安乐通
1.我喜欢这一系列（我不喜欢这一系列）

2.dann id hier eingeben:

3.und die links Raususchen

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

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

或者将脚本放在

您甚至在加载

元素之前就试图访问该元素。将脚本
放在正文的末尾

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

您需要使用文档或窗口.onload

window.onload = function() {}

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

您的脚本在加载页面之前被评估，这意味着HTMLDOM还不可用。您需要做的是在窗口的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>


addEventListener（“加载”，函数（）{
var el=document.getElementById（'serie'）；
var lnk=document.getElementById（'link'）；
el.onchange=el.onkeyup=function（）{lnk.href=”http://bs.infinibrain.net/“+userInput+”.xml”；}；
});
用户输入
变量未定义
并将脚本移动到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>


安乐通
1.我喜欢这一系列（我不喜欢这一系列）

2.dann id hier eingeben:

3.und die links Raususchen

var el=document.getElementById（'serie'）；
var lnk=document.getElementById（'link'）；
el.onchange=函数（）{
userInput=el.value；
lnk.href=”http://bs.infinibrain.net/“+userInput+”.xml”；}；

顺便说一句，在给出答案后不允许更改问题。你能做一个JSFIDLE吗？你能在这里发布你的代码而不是图片吗。JSFIDLE对我来说是错误的：（问题是你的javascript代码在html页面完全加载之前运行，如果你移动正文下部的脚本，它会工作；-）没有一个答案是有效的…它仍然不起作用。我把这个放在前面和后面，但是没有一个work@Paedow我更新了我的答案。很好，看。只是把标题改成了更合适的
<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>

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