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
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):
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>
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.