I am having problems getting the OnChnage Listener to work, if i position the script after the </form> tag the listener works fine but if i place the script within the <head> tags it fails to work.
On my site i can only have the script within the <head> tags is there anything I can do to make the script runn within the <head> tags?
in this configuration the script does not work
<head>
<script type="text/javascript">
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
</script>
</head>
<body>
<form>
<input id="address" name="address" type="text"/>
<input id="test" name="test" type="text"/>
</form>
I am having problems getting the OnChnage Listener to work, if i position the script after the </form> tag the listener works fine but if i place the script within the <head> tags it fails to work.
On my site i can only have the script within the <head> tags is there anything I can do to make the script runn within the <head> tags?
in this configuration the script does not work
<head>
<script type="text/javascript">
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
</script>
</head>
<body>
<form>
<input id="address" name="address" type="text"/>
<input id="test" name="test" type="text"/>
</form>
3 Answers
Reset to default 6Put it this way:
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
}
</script>
</head>
Put your code in the window.onload function:
<head>
<script>
window.onload = function() {
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
}
</script>
<body>
...
</body>
When you place the script in the <head>, the elements you are getting with document.getElementById do not exist yet. Wait for the window to load before adding the event listener.
You need to wait for the window to load with a jQuery $(document).ready or by adding a loaded listener to the window:
window.addEventListener('load',addListener,false);
function addListener() {
//your code here
}