Member Avatar for RisTar

Hi everyone,
Im having some issues with a website that im working on.
The website have mysql database and all of the server side code is done in php, therefor all of the files are named with a .php extension,
I know it shouldn't make any different but for some reason i can't access the document elements using javascript... im not a js expert but i know the basics and i use it mostly for forms validation, but every time i try to use getElementById, i get nothing back, when i try to use alert and reference it i get null....
That's my js file

// Registration From Validation
window.onload = initForm();

function initForm(){
    document.getElementById("errorBox").style.visible = "hidden";
}

It's an external file but it's embedded properly, and im sure of that
because the alert function is working....

Please note that getElementById doesn't work on anything....
I tried all of my document id's and i can't change any property
or create new information in any of those id's.

I'm pretty frustrated by now and help will be appreciated...
Thanks

  • 4 Contributors
  • 6 Replies
  • 167 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by almostbob

Recommended Answers

All 6 Replies

Member Avatar for fxm

It's an external file but it's embedded properly, and im sure of that
because the alert function is working....

Well, since you have provided nothing whatever to examine, I reckon I'm free to make a few guesses:
you misspelled "getElementById"
you misspelled "errorBox"
"errorBox" is not an element of document
the Id attributes are not typed properly
See
https://developer.mozilla.org/en/DOM/document.getElementByID

Member Avatar for RisTar

Hi Guys, im pretty sure that all of the spelling is correct.
Attached is a piece of code that should give you an idea
of what im trying to do.
javascript is embedded to html and still not working...

<?php
	session_start();
	$page = "";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="styles/style.css" />
         <link rel="stylesheet" type="text/css" href="styles/registrationstyles.css" />
		<title>Ivory Computers - Computer Seller Sydney Bondi | Computer Repairs Sydney Bondi</title>
        <script type="text/javascript">
            document.getElementById("errorBox").style.visibility="hidden";
        </script>
	</head>

	<body>
    	<div id="siteContent">
            
        <?php include("header.php"); ?>
        
       		<div id="pageTitle">
            	<img src="images/misc/registration.png" alt="Ivory Computers - Sales and Repairs" />
                <h2>Hi! Ready to register with Ivory Computers?<br/></h2>
            </div>
            
         
            
            <div id="registrationForm">
            
            <div id="errorBox">
             	Please type in your first name<br />
                Please type in your last name<br />
                Please type in your address<br />
                Please type in your city<br />
                Please enter your postcode <br />
                Please enter a valid email address<br />
                Please enter a valid phone number<br />
                Please enter a valid mobile number<br />
                Please enter a valid username<br />
                Please enter a valid password: 6-8 characters<br />
            </div>
Member Avatar for RisTar

Ok, so i figured the problem but im not sure about the solution...
The reason i get null is because the onload function is triggered before the DOM has been fully loaded and that's way it can't pick up errorBox.
I tried to put the script tags at the end of the HTML document and it's working fine, but im not sure if it's good practice or even valid to do it.
Is there a better way to make sure that the DOM is fully loaded before triggering a function ?

Member Avatar for fxm

The reason i get null is because the onload function is triggered before the DOM has been fully loaded and that's way it can't pick up errorBox.
I tried to put the script tags at the end of the HTML document and it's working fine, but im not sure if it's good practice or even valid to do it.

It is certainly valid [see the second snippet in my answer to a nearby thread]. As for "good practice": since a dependable cross-browser alternative may not exist, anything that works has to be better than nothing.

Is there a better way to make sure that the DOM is fully loaded before triggering a function ?

Better solutions than placing the DOM-dependent script just before the closing </body> tag may be difficult to arrive at: not all browsers support the 'defer' property on scripts or the [seemingly useful] events (like 'DOMContentLoaded' or 'DOMContentReady'), and even where support exists it may be inconsistent or unpredictable. In the worst case [content is being fetched from a slow or failure-prone source] you could add an existence check on a timer - ugly though that sounds.

Member Avatar for almostbob

solution 1

<script type="text/javascript">
function wait() { document.getElementById("errorBox").style.visibility="hidden" };
</script>
</head>
<body onload='wait();'>

solution 2

<div id="errorBox" style='visibility:hidden;'>

solution3

#errorBox { visibility: hidden; }
Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.