CODEWITHSUNDEEP
javascriptajax
Muhammad Fiaz
Muhammad Fiaz

Reputation: 1

when javascript function argument are not passed

i am new to JavaScript, i am learning javascript from a book "Visual Quickstart guide",

i am struggling with the following code logic, as function definition shows it expects an argument, 

function getNewFile(evt) {
    makeRequest(this.href);
    evt.preventDefault();
}

but when the function is being called there is not argument being passed to it,

function initAll() {
    document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);
    document.getElementById("makeXMLRequest").addEventListener("click",getNewFile,false);
}

i do not understand the default behavour of this function when no arguments have been passed to it,

complete code from the book 

window.addEventListener("load",initAll,false);
var xhr = false;

function initAll() {
    document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);
    document.getElementById("makeXMLRequest").addEventListener("click",getNewFile,false);
}

function getNewFile(evt) {
    makeRequest(this.href);
    evt.preventDefault();
}

function makeRequest(url) {
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
            }
        }
    }

    if (xhr) {
        xhr.addEventListener("readystatechange",showContents,false);
        xhr.open("GET", url, true);
        xhr.send(null);
    }
    else {
        document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
    }
}

function showContents() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            if (xhr.responseXML && xhr.responseXML.childNodes.length > 0) {
                var outMsg = getText(xhr.responseXML.getElementsByTagName("choices")[0]);
            }
            else {
                var outMsg = xhr.responseText;
            }
        }
        else {
            var outMsg = "There was a problem with the request " + xhr.status;
        }
        document.getElementById("updateArea").innerHTML = outMsg;
    }

    function getText(inVal) {
        if (inVal.textContent) {
            return inVal.textContent;
        }
        return inVal.text;
    }
}

Upvotes: 0

Views: 45

Answers (2)

Chris Pietschmann
Chris Pietschmann

Reputation: 29905

The below code, the 'getNewFile' method is being passed in as a parameter and isn't actually executed until the 'click' even is raised, then it is executed with the expected parameter arguments.

function initAll() {
    document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);
    document.getElementById("makeXMLRequest").addEventListener("click",getNewFile,false);
}

In Javascipt, Functions are objects just as numbers, strings, array, etc. If the function name doesn't have "()" double parenthesis after it (with or without out arguments) then it's not being executed right then, but rather being passed as a parameter for future reference/execution.

Here's a couple simple examples of passing Functions as a parameter:

Example 1

function example1() {
    alert('hello');
}

function executor1(f) {
    // execute the function passed in through argument 'f'
    f();
}

executor(example1);
// example1 isn't executed/called until it's called from within executor1

Example 2

function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

function alertMath(a, b, f) {
    var result = f(a, b);
    alert(result);
}

// alerts the message of "3"
alertMath(1, 2, add);

// alerts the message of "6"
alertMath(2, 3, multiply);

// alerts the message of "3"
// this shows a function being defined inline
alertMath(6, 2, function(a, b) {
    return a / b;
});

I hope this gives you a little more context surrounding this as to what's going on.

Upvotes: 1

Zaenille
Zaenille

Reputation: 1384

In here : 

function getNewFile(evt) {
    makeRequest(this.href);
    evt.preventDefault();
}

getNewFile is the function reference, getNewFile(parameter) is the function call.

As you can see here :

document.getElementById("makeTextRequest").addEventListener("click",getNewFile,false);

getNewFile (function reference, not function call) is passed on to addEventListener. According to the addEventListener documentation, the second parameter is the listener, which is the function that will be called when the event triggers.

Upvotes: 0

Related Questions