Debt Consolidation - Debt Consolidation - Funbrain Games - Payday Loans - Debt Consolidation
PDA

View Full Version : Problems with getElementByID

Zynex
Feb 15th 2007, 1:33 am
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
nico_swd
Feb 15th 2007, 2:02 am
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
Zynex
Feb 15th 2007, 2:08 am
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[i] + '\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>
nico_swd
Feb 15th 2007, 2:14 am
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.
Zynex
Feb 15th 2007, 2:47 am
Thank you :) I have found the solution by indeed placing tthe codes withing the functions. :D

thanx alot :)