How to set default value?

JavaScript
1

Im new to javascript, and i want to set a default value for a input box.

I have a function which uses the .value method to add a value to input field when the document is loaded, but i get an error "document.getElementById(“myText”) is null ".

here is the code for what im trying to do.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Learning Javascript</title>
		<script type="text/javascript" src="js/javascript.js"></script>
    </head>
<body>
    <input type='text' id='myText' />
	<input type='button' onclick='EnterText()' value='Form Checker'/>
	<input type='button' onclick='ClearText()' value='Clear Form' />
</body>
</html>



window.onload = SetDefaultValue();

function EnterText() {
    myTextField = document.getElementById("myText");
	if(myTextField.value != ""){
	    alert("You Entered: " + myTextField.value);
	}else {
	    alert("Please enter some text!");
	    }
}
			
function ClearText() {
    ClearTextField = document.getElementById("myText");
	if (ClearTextField.value > "") {
	    ClearTextField.value = "";
	}else {
	    alert("Please enter some text!");
	}
}
			
function SetDefaultValue() {
    var PopulateField = document.getElementById("myText").value="John Doe";
}

its the function SetDefultValue() that’s not working right. I’m a total javascript newbie and i could really use some help.

2

Try this

window.onload = function(){
    SetDefaultValue();
};
3

The other alternative is to just move the <script> tag to immediately before the </body> tag.

Doing so would also make the page appear to load faster as the rest of the page content would not be waiting for the script to load. Browsers can’t load anything else while loading a script referenced from a <script> tag but modern browsers can load up to eight other files in parallel (older browsers can only manage two).

4

It works now! Thank you.

i’m trying to understand why it wasn’t working the way i was doing it.

Why does it work when you SetDefaultValue() function inside of an anonymous function()?

5

Before you try to access an element in js, it must either have already been loaded into the browser or created earlier by js. It sounds like your running getElementById before the element exists. Either use window.onload or place your js after the element has been created in the html.

Another option is to not use js and just give the textbox a value attribute and value in the html.

6

The problem with the original script was caused by the onload handler incorrectly including a (). Leave this out and it works.

window.onload = SetDefaultValue(); /* wrong /
window.onload = SetDefaultValue; / correct */

7

Thanks AllanP, ill have to remember that next time.

Also is there a faster way to run the a javascript function? like after the DOM loads?

8

I’m still trying to understand why are you using scripting to set the default value in the first place?

Wouldn’t this work just as well (instantaneous in fact), without scripting?


<input type="text" value="John Doe" />
9

Yes - as I said before - move the script tag to immediately before the </body>.