Question

I have these lines in my html head section

<script type="text/javascript" src="../behaviour/location.js"></script>
<script type="text/javascript" src="../behaviour/ajax.js"></script>

When I use either in isolation, the code in the external files executes as expected.

However, when I use both, I find that neither works correctly. What do I need to do to fix this?

location.js

// JavaScript Document

function addLoadEvent (func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func;
        }
    }
}

//county changer
function countyUpdate (message) {

    var name = message.getAttribute("name");
    var check = message.checked;
    var countyId = message.getAttribute("id");
    var countyId = countyId.split("_")[1];
    var innerpost = document.getElementById("innerpost_"+countyId); 
    var checks = innerpost.getElementsByTagName("input");

    for (var i = 0; i< checks.length; i++) {
        if (checks[i].checked == true && check == true) {
        checks[i].checked = false; 
        }
    }

}

//postcode changer
function postcodeUpdate (message) {
    var parent = message.parentNode.parentNode.getAttribute("id").split("_")[1];
    var county = "county_"+parent;
    var checkbox = document.getElementById(county);
    var checked = message.checked;

    if (checked == true) {
        checkbox.checked = false;
    }


}

//get a dynamic list of al postcode checkboxes
function getCounties () {
var county = document.getElementsByTagName("input");


for (var i = 0; i< county.length; i++) {
var check = county[i].getAttribute("type");

if (check == "checkbox") {  
var name = county[i].getAttribute("name");
var parent = county[i].parentNode.parentNode.getAttribute("id");
var parent = parent.split("_")[0];

//action for county
if (parent != "innerpost") {
county[i].onclick = function() { countyUpdate(this); };

    }//if


    //action for postcode
    if (parent == "innerpost") {
    county[i].onclick = function() { postcodeUpdate (this); }; 
    }//if

    }//if
    }//for
    }//function

    addLoadEvent (getCounties);

ajax.js

function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","cart.php",true);
xmlhttp.send();
}

And this is the inline code to activate the second file:

<button type="button" onclick="loadXMLDoc()">Change Content</button>

When I try using both files together, I don’t seem to be able to use any functions (not even simple alerts wrapped in a function).

Answer 1

My bet is that you’re getting a mess out of that window.onload= juggling. I suggest you use the standard window.addEventListener() interface (check for its existance and use window.attachEvent() when the standard interface is missing if you want to support IE too). This should also guarantee that the onload functions get executed in the same order as the scripts that set them. Something like:

if (window.addEventListener) {
  window.addEventListener('load', somefunc, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', somefunc);
} // else, no way to add multiple onload handlers