Call functions inside of another function

Question

I am having a problem calling functions inside a function.

This is the sample code:

<script>
    function saveInfo() {
        function returnEmail() {
            var _e = document.getElementById("email").value;
            return _e;
        }

        function returnName() {
            var _n = document.getElementById("name").value;
            return _n;
        }
    }
</script>

The saveInfo() method is made in a button:

<input type="submit" value="Save" onclick="saveInfo()" style="color: black">

So there are 2 forms, where you fill up your email and name. By clicking "Save" -button, the DIV will disappear (this works) and another DIV will appear within text like this: Name = (name) | Email = (email).

I am having problems to call the saveInfo()'s returnEmail() for the corresponding line (where there is 'Name = ').

I try to write them like this:

<p>Email: 
   <script>
      var pEmail = saveInfo().returnEmail();
      document.write(pEmail);
    </script> <br>
</p>

I know that the script above is incorrect, this is not the only way I have tried to return it.

`saveInfo()` doesn't return anything. The functions defined inside it are local to that function. If you want to use them outside `saveInfo`, return them. — , Apr 25 '17 at 17:16
So return returnEmail(); and return returnName(); after each function? — Timppa, Apr 25 '17 at 17:17
possible duplicate of http://stackoverflow.com/questions/8817872/javascript-call-nested-function — Ananth Rao, Apr 25 '17 at 17:17
No, you can only return one thing from a function. So return a thing that contains each of the other functions. I fail to see the point of doing this though. Why aren't `returnEmail` and `returnName` just top-level functions? — , Apr 25 '17 at 17:18
Possible duplicate of [Javascript call nested function](http://stackoverflow.com/questions/8817872/javascript-call-nested-function) — Heretic Monkey, Apr 25 '17 at 17:18

score 4 · Answer 1 · answered Apr 25 '17 at 17:16

4

It looks like you're trying to return those functions to use later. Try doing this instead. This function now returns an object with two functions.

function saveInfo() {
    return {
        returnEmail: function() {
            var _e = document.getElementById("email").value;
            return _e;
        },

        returnName: function() {
            var _n = document.getElementById("name").value;
            return _n;
        }
    }
}

Previously, your saveInfo function wasn't returning anything, so

saveInfo().returnEmail();

would evaluate to

undefined.returnEmail();

and you'd get an error

answered Apr 25 '17 at 17:16

Carlos Rodriguez

2,190
2
18
29

1

I believe this works, it didn't work for me but I realized that I need to load my script after the form has been submitted, and will look forward to fix that before I can tell if it works. Thanks! – Timppa Apr 25 '17 at 17:42
Email:
<-- I added this, it will not write the variable inside the HTML page. First alert works, nothing works after I define var _e. Any idea? – Timppa Apr 25 '17 at 18:31

score 2 · Accepted Answer · answered Apr 25 '17 at 17:17

You need to return the exposed functions from the function saveInfo. At this time, your code only declares the function, but doesn't return anything. So, saveInfo returns undefined. Below approach is an implementation of the Revealing module pattern to reveal the public members outside your function.

function saveInfo() {
        var returnEmail = function () {
            var _e = document.getElementById("email").value;
            return _e;
        }

        var returnName= function () {
            var _n = document.getElementById("name").value;
            return _n;
        }

        return {
           returnEmail :returnEmail,
           returnName :returnName
        }
    }

score 1 · Answer 3 · answered Apr 25 '17 at 17:18

If your set on calling it like saveInfo().returnEmail(); then you can do the following. saveInfo returns an object containing the returnEmail method.

<script>
    function saveInfo() {
        // Do any desired logic
        return {
            returnEmail: function() {
                var _e = document.getElementById("email").value;
                return _e;
            },

            returnName: function() {
                var _n = document.getElementById("name").value;
                return _n;
            }
        }
    }
</script>

Call functions inside of another function

3 Answers3