Result of jQuery keyup event handler in switch statement not returned

Question

I have a switch Statement in JavaScript in which the keyup event handler doesn't return the callback to my variable (var test in this case).

It is the last case (110) that doesnt work.

Here is the code. Hope you can help to enlight me:

var getDateRange;

$(".nav-reports").append(
  '<div id="daterange-container">' +
  '<select id="daterange">' +
  '<option value="0">Choose duration:</option>' +
  '<option value="10">Today</option>' +
  '<option value="20">Yesterday</option>' +
  '<option value="30">This week</option>' +
  '<option value="40">Last week</option>' +
  '<option value="50">This month</option>' +
  '<option value="60">Last month</option>' +
  '<option value="70">This year</option>' +
  '<option value="80">Last year</option>' +
  '<option value="100">Everything</option>' +
  '<option value="110">Last x days</option>' +
  '</select>' +
  '</div>'
);

getDateRange = function () {
  var test;
  var dateString = "yyyy-MM-dd";
  var selectedOption = parseInt($('#daterange').change().val());
  $('.daterange-input').detach();
  switch (selectedOption) {
    case 10: // works
            break;
    case 20: // works
            break;
    case 30: // works
            break;
    case 40: // works
            break;
    case 50: // works
            break;
    case 60: // works
            break;
    case 70: // works
            break;
    case 80: // works
            break;
    case 100: // works
            break;
    case 110: // doesnt't work
            $('#daterange-container').append('<input class="daterange-input" type="text" maxlength="4">');
            $('.daterange-input').keyup(function () {
              test = '/' + Date.today().addDays(-parseInt($(this).val())).toString(dateString) + '/' + Date.today().toString(dateString);
            });
            break;
  }
  return test;
};

Thank you in advance.

I call the getDateRange function here:

$('.' + report.description).click(function () {
                    var dateRange = getDateRange();
// some more code not in relation
                })

You never assign `test` within the `getDateRange()` function. It's only set in the `keyup` event handler, but even then it's out of scope of where you're expecting it to be - you're attempting to return a value that cannot possibly be set until after another event has happened. I'm not sure exactly what behaviour you're expecting here. — Rory McCrossan, Sep 06 '17 at 09:21
Also please click the `<>` snippet editor and create a [mcve] — mplungjan, Sep 06 '17 at 09:21
Well that is because you define the test variable in a seperate function you never call, but bind at the `keyup` event. — Bellian, Sep 06 '17 at 09:21
@Bellian: completed my example so you can see where I call getDateRange(). — programisto, Sep 06 '17 at 09:36
Jea that is true.. BUT: You define test inside the `getDateRange` function without assigning a value, so the value is `undefined`. In the `case 110:` part you add another event handler to the `.daterange-input` element which (when triggered) will set the `test` variable. Since the function is NOT triggered the value of test stays `undefined`. At the end you return `test` and therefore `undefined` — Bellian, Sep 06 '17 at 09:43
@Bellian: Could you please give an example for a trainee how to do it right? Thank you in advance. — programisto, Sep 06 '17 at 09:52

programisto · Answer 1 · 2017-09-06T10:17:58.080

Yeah. Thanks to @Bellian I got it.

Defined test outside of getDateRange and removed the return test statement.

Now I call getDateRange before assigning var dateRange.

Here is the working code:

 var test;

    getDateRange = function () {
        var dateString = "yyyy-MM-dd";
        var selectedOption = parseInt($('#daterange').change().val());
        $('.daterange-input').detach();
        switch (selectedOption) {
            case 110:
                $('#daterange-container').append('<input class="daterange-input" type="text" maxlength="4">');
                $('.daterange-input').keyup(function () {
                    test = '/' + Date.today().addDays(-parseInt($(this).val())).toString(dateString) + '/' + Date.today().toString(dateString);
                });
                break;
        }
    };

And then:

$('.' + report.description).click(function () {
    getDateRange();
    var dateRange = test;
});

Thanks @Bellian and to all the others.

And I was correct: - it's a dupe `$('#daterange-container').on("keyup",".daterange-input",(function () { test = '/' + Date.today().addDays(-parseInt($(this).val())).toString(dateString) + '/' + Date.today().toString(dateString); });` — mplungjan, Sep 06 '17 at 14:08

Result of jQuery keyup event handler in switch statement not returned

1 Answers1