HTML doesn't call javascript function with required arguments

Question

JavaScript I call from HTML file doesn't work correctly.

Here is code from html file:

<li><a href="#" class="decorNavi" onclick ="xmlRequest('about')" >ABOUT</a></li>

And here is my script:

function xmlRequest(target){
    var targetClick;
    targetClick = target;

    if (window.XMLHttpRequest) {
        xmlRequest = new XMLHttpRequest();
    }
    else{
        xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlRequest.open("GET", "targetClick"+".html?="+Math.random() , true);

    xmlRequest.onreadystatechange = function(){
    if (xmlRequest.readyState == 4 && xmlRequest.status ==200) {
            document.getElementById("midContainer").innerHTML = xmlRequest.responseText;
        }
    }

    xmlRequest.send();
}

Can anyone explain me my mistakes? Keep in mind that i'm junior Web Designer, so sorry for lame question.

Answer 1

you mixed up variables and string represantations of them, heres a corrected version

<li><a href="#" class="decorNavi" onclick ="xmlRequest('about')" >ABOUT</a></li>

so now youre passing a string as argument

function xmlRequest(target){

        var targetClick;

        //here you say the string argument now is called targetClick
        targetClick = target;

        if (window.XMLHttpRequest) {

            xmlRequest = new XMLHttpRequest();
        }

        else{
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //in this line you concatinate the variable with another string, result is a string so you dont need to quote the variable, this wouldnt work
        xmlRequest.open("GET", targetClick+".html?="+Math.random() , true);


        xmlRequest.onreadystatechange = function(){

            if (xmlRequest.readyState == 4 && xmlRequest.status ==200) {

                document.getElementById("midContainer").innerHTML = xmlRequest.responseText;
            }
        }

    xmlRequest.send();
}

you need to run this on a webserver, when using the "file://" protocoll youl get a cross origin error, additionally the url needs to be on the same host

Answer 2

in you javascript call from HTML, about has to be defined as a String. So enclose it with signle quotes like this :

<li><a href="#" class="decorNavi" onclick ="xmlRequest('about')" >ABOUT</a></li>

Like you made it, about is supposed to be a JS variable, so it is undefined.

Answer 3

I'm pretty sure you've got an error because about is not defined. Shouldn't it be a string?

<li><a href="#" class="decorNavi" onclick ="xmlRequest('about');" >ABOUT</a></li>

Answer 4

targetClick is variable now, it's not string so you sholud do

xmlRequest.open("GET", targetClick+".html?="+Math.random() , true);
//---should be without quotes--^

instead of

 xmlRequest.open("GET", 'targetClick'+".html?="+Math.random() , true);

Answer 5

You can't load a local file with XmlHttpRequest. Put those files in a local web server. Browsers won't allow this because, using this way, a remote site could access your local files, which can't be allowed.

Answer 6

Have you defined the about-object? Or do you wanted to give over a string like this:

<li><a href="#" class="decorNavi" onclick ="xmlRequest('about')" >ABOUT</a></li>

Note the calling of xmlRequest('about') with ' ' instead of xmlRequest(about).