How to create a link based on textbox value?

Question

I'm trying to change the href of my link based on whats in the textbox with id="serie". As you can see, Firefox tells me that el is null. What did go wrong here?

(Upper part is Page, Middle part the debug-console and the lower part is my source code)

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

the problem is that your javascript code is running before your html page is fully loaded, if you move the script in the lower part of the body it will works ;-) — TheGr8_Nik, May 26 '15 at 08:23
die Daten in dem XML-File und dieses bs sehen verdächtig nach bs.to aus ... ;) — roeb, May 26 '15 at 08:30
Did you search on SO? This is the topic of a dozen or more questions. — , May 26 '15 at 08:32
possible duplicate of [getElementById() returns null even though the element exists](http://stackoverflow.com/questions/5371047/getelementbyid-returns-null-even-though-the-element-exists) — , May 26 '15 at 08:33
@roeb: Ich habe eine Kopie der BS Link-Datenbank, SC ist ja gerade ausgeblendet — LostPhysx, May 26 '15 at 08:33
Or see http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element. — , May 26 '15 at 08:35

Oleksandr T. · Answer 1 · 2015-05-26T08:34:27.503

3

You need use window.onload, because your script runs before the DOM has been loaded

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

or put script before </body>

Example

edited May 26 '15 at 08:34

answered May 26 '15 at 08:23

Oleksandr T.

76,493
17
173
144

Zee · Accepted Answer · 2015-05-26T08:34:32.953

You are trying to access the element even before its loaded. Place your script at the end of your 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>

Also you didnot define userInput, it should be el.value:

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

@Paedow I updated my answer. Works fine See [HERE](http://jsfiddle.net/Lypn61tr/). — Zee, May 26 '15 at 08:36

score 1 · Answer 3 · answered May 26 '15 at 08:26

Your script is being evaluated before the page is loaded, which means that the html DOM is not yet available. What you need to do is add you script in the load event of the window. This event is triggered when the page is fully loaded:

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

It's still not working. I put this before
and in the
, but none of those work — LostPhysx, May 26 '15 at 08:31

score 0 · Answer 4 · answered May 26 '15 at 08:25

0

You need to use document DOMContentLoaded or window.onload.

window.onload = function() {}

OR

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

answered May 26 '15 at 08:25

Radonirina Maminiaina

6,958
4
33
60

Mustaghees · Answer 5 · 2015-05-26T08:49:43.627

userInput variable is undefined.

And move your script below your html content. It will be like this

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

BTW changing question after answers are given is not allowed.

Just changed the title to a more appropriate one – LostPhysx May 26 '15 at 08:39 — LostPhysx, May 26 '15 at 08:39

How to create a link based on textbox value?

5 Answers5