JS Function not returning return [duplicate]

Question

I have the follwing function:

function anfahrtskosten()
{
    var xmlhttp;
    var entfernung=0;
    var anfahrtskostenergebnis=0;
    var anfahrtskostenergebnis1=0;
    var plz=document.modhochzeitskalk.plz.value;
    //aus den Parametern
    var anfahrtskosten=1;

    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)
                entfernung = xmlhttp.responseText;
                if (entfernung > 100 && entfernung < 2000) {
                    anfahrtskostenergebnis1 = anfahrtskosten * entfernung;
                } else {
                    anfahrtskostenergebnis1 = 0;
                }
                    anfahrtskostenergebnis = Math.round(anfahrtskostenergebnis1);
                    document.getElementById("anfahrtskostenergebnis").innerHTML=anfahrtskostenergebnis+",00 &euro;";
          }
    xmlhttp.open("GET","/modules/mod_hochzeitskalk/ogdb_remote.php?plzstart=10245&plzend="+plz,true);
    xmlhttp.send();
    return anfahrtskostenergebnis;
}

I want to use the number stored in the var anfahrtskostenergebnis within another function, I tried it like this:

var gesamtkosten = anfahrtskosten() + videokosten() + filmkosten() + fotokosten() + extrakosten();

But it doesnt work, what am I doing wrong?

The "A" in AJAX is Asynchronous meaning that it likely won't get a response until after your function has executed. — scunliffe
– scunliffe, Commented Feb 27, 2013 at 14:13
In this case... if you can use a library (like jQuery) it will solve a lot of this headache of browser compatibility for you. — scunliffe
– scunliffe, Commented Feb 27, 2013 at 14:14

Billy Moon · Accepted Answer · 2013-02-27 14:21:54Z

1

Because you are using AJAX, you can not continue processing until the AJAX call returns. The call is Asynchronous, meaning, the program flow continues, and the AJAX call is run in a paralel thread.

It makes a lot of sense to do it this way, as the alternative is to halt all script activity whist you wait for slow network traffic to deliver a result.

You need to re-structure your program to use callback functions, which are called after the value has been returned via AJAX.

This should get you started, but I suspect you are going to have to do similar things for the other functions you add together, and keep track somehow of the values that have already been collected, running the final callback once they are all retrieved.

function anfahrtskosten(){
    var xmlhttp;

    ... your original code here...

                    anfahrtskostenergebnis = Math.round(anfahrtskostenergebnis1);

                    // call the callback here, with the value you retrieved
                    callback(anfahrtskostenergebnis); // <~~~~
                    document.getElementById("anfahrtskostenergebnis").innerHTML=anfahrtskostenergebnis+",00 &euro;";
          }
    xmlhttp.open("GET","/modules/mod_hochzeitskalk/ogdb_remote.php?plzstart=10245&plzend="+plz,true);
    xmlhttp.send();
}

var callback = function(anfahrtskosten){
  var gesamtkosten = anfahrtskosten + videokosten() + filmkosten() + fotokosten() + extrakosten();
  // do something with cost...
}

answered Feb 27, 2013 at 14:21

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tobias Kess Over a year ago

First of all thanks for this extraordinary fast and qualitative answer! So I just need to add callback(anfahrtskostenergebnis); in the first function where you suggested, but I really do not understand how the second function, should look like:

function gesamtkosten() { var gesamtkosten = anfahrtskosten() + videokosten() + filmkosten() + fotokosten() + extrakosten(); document.getElementById('gesamtkosten').innerHTML = gesamtkosten+",00 &euro;"; }

Billy Moon Over a year ago

I have an example of the callback function at the bottom. It only handles the anfahrtskosten, but if the other elements are similar, you must either handle them in sequence, each leading to a callback, or you must trigger them all asynchronously, and in each callback, detect of all the parts have been gathered, and then call a final function, to do what you originally intended.

mmixLinus · Accepted Answer · 2013-02-27 14:20:58Z

1

You are missing a start brace '{' after if (xmlhttp.readyState==4 ... (ie., your if is only executing the first statement)

answered Feb 27, 2013 at 14:20

mmixLinus

1,7142 gold badges11 silver badges19 bronze badges

2 Comments

Billy Moon Over a year ago

This is a comment, not an answer, and I don't think you are correct. I think he has put a non-braced if statement, and indented it incorrectly. I think what appears to be the end brace for the if, is actually the end brace for the function above it. It would be better to put braces on the if statement for clarity.

mmixLinus Over a year ago

Comment. Yes, comment. Sorry. Thanks!

Tobias Kess · Accepted Answer · 2013-02-28 13:56:16Z

0

a really easy solution or goaround is to store the varibale somewhere in the document in a innerhtml, what I did already in my example

document.getElementById("anfahrtskostenergebnis").innerHTML=anfahrtskostenergebnis+",00 €";

so the second functions can reuse this value by reading it from the innerHTML. In my case I needed also to set a small timeout before executing the second function, to be sure

answered Feb 28, 2013 at 13:56

Tobias Kess

33 bronze badges

Collectives™ on Stack Overflow

JS Function not returning return [duplicate]

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Related