Possible Duplicate:
Why does jQuery or a DOM method such as `getElementByID` not find the element?
Before the HTML tag I run some php code. During this I need to include some javascript lines like
..php code...
..javascript code...
..php code..
<html>
<head>
</head>
<body>
<input type="file" name="file" id="file">
</body>
</html>
In the javascript code I want to hide the file element.
This doesn’t do anything:
..php code
?>
<SCRIPT LANGUAGE="JavaScript">
document.getElementById('file').style.display = 'none';
</script>
<?php
…php code
If I put an alert there, it is displayed.
If I put that line into a function in the <head></head> block and call it from e.g. an onClick event of a button, the file element becomes hidden, so the line is fine. Maybe document.getLementByID is invalid outside the html tag? Or the problem is maybe that the page is not loaded yet so there is no element with that id? If this is the case, what can I do?
SOLUTION
I added a variable in the php code as $int = 1; (and $int = 0; somewhere else, but still before the page is loaded).
Then in the <head></head> block:
window.onload = selectChoose;
function selectChoose()
{
if (<?php echo $int ?> == 0) {
showChoose();
}
else {
hideChoose();
}
}
function showChoose()
{
document.getElementById('file').style.display = 'inline';
}
function hideChoose()
{
document.getElementById('file').style.display = 'none';
}
It is as you said, it just hasn’t loaded yet.
JavaScript that affects a particular element must either be deferred (
window.onload, on an event handler, etc) or else placed after the element it is trying to modify.