Calling function from anonymous function in JQuery returns undefined

Question

I'm working with this script which needs to call the external function, but the value returned in the log shows 'undefined'.
I have a checkbox that calls the external function successfully, but the anonymous jQuery function is not successful. Could this be a scope issue of some sort?

Thanks for any help.

css:

div.row {
    border: 1px solid blue;
    width: 100px;
}
div.child {
    border: 1px solid red;
    display: inline-block;
}

javascript:

function padZeros(ksa) {
    getDigits(ksa);
    //alert(s); 
    //document.getElementById("ksa_padded").value=s
}

function getDigits(MyDigits) {
    var ksa = MyDigits;
    var re4Digit = /^([0-9])([0-9]?)([k|s|a])([0-9])([0-9]?)([A-z]?)$/;
    var first2Digits = ksa.replace(re4Digit, "$1$2");
    //alert(first2Digits);
    //return first2Digits;
    pad(first2Digits, '2');
}

function pad(num, size) {
    //var s = num+"";
    //alert(num);
    s = num + "";
    //alert(s);
    while (s.length < size) s = "0" + s;
    return s;
    //alert(s);

}

$("#add").click(function () {
    var inserted = false;
    var newText = $("#addText").val();
    var $newItem = $("<div class='child'>" + newText + "</div>");
    $(".row:first .child").each(function () {
        //alert($(this).text());
        xx = $(this).text();
        var compare_a = padZeros(xx);
        //alert(compare_a);
        console.log(xx);

        if ($(this).text() > newText) {
            $newItem.insertBefore($(this));
            inserted = true;
            return false;
        }
    });
    if (inserted == false) {
        $newItem.appendTo(".row:first");
    }
});

html

 <div class="row">
     <div class="child">3K1</div>
     <div class="child">3K3</div>
     <div class="child">3K4</div>
     <div class="child">1K1</div>
     <div class="child">1K2</div>
 </div>
 <div class="row">
     <div class="child">IS2</div>
     <div class="child">IS4</div>
 </div>
 <div class="row">
     <div class="child">IA2</div>
     <div class="child">IA4</div>
 </div>
 <br/>
 <input id="addText" type="text" />
 <input id="add" type="button" value="Insert Element" />
 <br>

 <input type="checkbox" onClick="padZeros('1k10s')">
 <input type="text" id="ksa_padded">

If you don't have your source code indented properly, at least run it through jsbeautifier.org before you post it here. — Felix Kling
– Felix Kling, Commented Feb 19, 2014 at 0:17

Abraham Hamidi · Accepted Answer · 2014-02-19 00:14:10Z

0

Try

return getDigits(ksa);
return pad(first2Digits,'2');

You have to return things, otherwise they'll come out as undefined.

answered Feb 19, 2014 at 0:14

Abraham Hamidi

13.9k3 gold badges39 silver badges52 bronze badges

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

7 Comments

buck1112 Over a year ago

Thanks. I've added those in my getDigits and pad functions, but I'm still getting the 'undefined'. When I test just those functions, calling the PadZero function from an onclick event, the value returns successfully. It's only when I try calling PadZero from within the anonymous function that 'undefined' occurs.

Abraham Hamidi Over a year ago

@buck1112 .text() must be undefined. Try logging $(this) and look at the output.

buck1112 Over a year ago

yes, it is. It is only when I call the function that it becomes undefined, however, as below. console.log(padZeros($(this).text()));

Abraham Hamidi Over a year ago

@buck1112 Is it undefined when you padZeros('1k10s') in the anonymous function?

buck1112 Over a year ago

Yes it is. I tried logging the variable, as well as padZeros('1k10s') directly, but they both returned 'undefined'. Thanks.

|

Collectives™ on Stack Overflow

Calling function from anonymous function in JQuery returns undefined

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related