JavaScript OnChange Listener position in HTML markup

Question

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>

score 6 · Accepted Answer · answered Aug 29 '12 at 19:39

Put 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>

score 1 · Answer 2 · answered Aug 29 '12 at 19:41

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>

score 0 · Answer 3 · answered Aug 29 '12 at 19:39

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
}

JavaScript OnChange Listener position in HTML markup

3 Answers3

Linked