1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problems with getElementByID

Discussion in 'JavaScript' started by Zynex, Feb 15, 2007.

  1. #1
    I have made a system to add names to a list. I have 3 input text fields, and I gave them all a unique ID. But I can't manage to reach them with getElementByID. Could someone look into my code and tell me what I am doing wrong?

    //this is the part were I made the input fields and there ID's//

    <input type="Text" id="input" />
    <input type="Text" id="search" />
    <input type="Text" id="result" onFocus="blur()" />
    --------------------------------------------------------------------
    //this is were I use the getElent to reach the textfields by ID//

    var inputField = document.getElementById('input');
    var searchField = document.getElementById('search');
    var resultField = document.getElementById('result');
    --------------------------------------------------------------------
    //this is how i've put it in the code//

    function addName() {
    if (inputField.value != '') {
    namen.push(inputField.value);
    }
    } //addName

    function searchArray() {
    gevonden = 'nee';
    for (j = 0; gevonden == 'nee' && j < namen.length; j++) {
    if (namen[j] == searchField.value) {
    gevonden = 'ja';
    resultField.value = j;
    }
    else {
    resultField.value = 'niet gevonden';
    }
    }
    }

    -----------------------------------------------------------------------

    Thank you in advance!

    Donny
     
    Zynex, Feb 15, 2007 IP
  2. nico_swd

    nico_swd Prominent Member

    Messages:
    4,153
    Likes Received:
    344
    Best Answers:
    18
    Trophy Points:
    375
    #2
    In which order are these on your page? Note that getElementById must be called after the element has been parsed by the browser.

    Try defining the variables in your functions.

    
    
    function addName() {
    var inputField = document.getElementById('input');
    if (inputField.value != '') {
    namen.push(inputField.value);
    }
    } //addName
    
    Code (javascript):
     
    nico_swd, Feb 15, 2007 IP
  3. Zynex

    Zynex Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well here is the total Code. Here you can see the order
    ------------------------------------------------------------------------
    <script language="JavaScript">

    var namen = new Array('piet','kees','jan');
    var inputField = document.getElementById('input');
    var searchField = document.getElementById('search');
    var resultField = document.getElementById('result');

    function addName() {
    if (inputField.value != '') {
    namen.push(inputField.value);
    }
    } //addName

    function addNameAndShow() {
    if (inputField.value != '') {
    namen.push(inputField.value);
    }
    showList();
    }


    function showList() {
    var tekst = '';
    for (i=0; i < namen.length; i++) {
    tekst += namen + '\n';
    }
    alert(tekst);
    } //showList

    function searchArray() {
    gevonden = 'nee';
    for (j = 0; gevonden == 'nee' && j < namen.length; j++) {
    if (namen[j] == searchField.value) {
    gevonden = 'ja';
    resultField.value = j;
    }
    else {
    resultField.value = 'niet gevonden';
    }
    }
    }

    function deleteName() {
    if (resultField.value != '' && resultField.value != 'niet gevonden') {
    namen.splice(resultField.value, 1);
    searchField.value = '';
    resultField.value = '';
    }
    }

    function sortList() {
    namen.sort()
    }

    </script>
    </head>

    <body>

    <form name="formulier">

    <input type="Text" id="input" />

    <input type="Button" name="knop" value="voeg naam toe" onClick="addName()" />

    <input type="Button" name="knop2" value="voeg naam toe en toon" onClick="addNameAndShow()" />

    <input type="Button" name="knop3" value="toon lijst" onClick="showList()" />

    <input type="Button" name="knop4" value="sorteer op alphabet" onClick="sortList()" />

    <hr/>

    Zoeken: <input type="Text" id="search" />

    <input type="Button" name="knop5" value="zoek naam" onClick="searchArray()" />

    <br/>

    Locatie: <input type="Text" id="result" onFocus="blur()" />

    <input type="Button" name="knop6" value="verwijder uit lijst" onClick="deleteName()" />

    </form>
     
    Zynex, Feb 15, 2007 IP
  4. nico_swd

    nico_swd Prominent Member

    Messages:
    4,153
    Likes Received:
    344
    Best Answers:
    18
    Trophy Points:
    375
    #4
    The code is parsed from the top to the bottom. When the browser reaches the getElementByIds, the elements you're trying to get haven't been parsed yet and it gives you an error. Try what I suggested and put the getElementByIds into the functions. This way the browser searches for the elements when the function is called, which should be after the elements have been parsed.
     
    nico_swd, Feb 15, 2007 IP
  5. Zynex

    Zynex Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you :) I have found the solution by indeed placing tthe codes withing the functions. :D

    thanx alot :)
     
    Zynex, Feb 15, 2007 IP