How to use a javascript function depending on if else?

Question

How can I write...

If a user is typing in input1 
    then do stuff in this table
else if 
    a user is typing in input2 then do stuff in the other table

I'm new to javascript but I'm learning. The problem I'm having is finding the correct way to write the if and else conditions. What I have now doesn't work correctly but it helps illustrate my goal.

<div class = "search">
  <input type="text" id = "inputTRUE" placeholder="Search Bought">
  <input type="text" id = "inputFALSE" placeholder="Search In Use">
</div>

JavaScript

<script type="text/javascript">

    var lis = $(".cartInfosFALSE tr");
    var liss = $(".cartInfoTRUE tr");
    var list = $.makeArray(lis.map(function(k, v) {
                    return $(v).text().toLowerCase();
                }));
if (liss) {
    $("#inputTRUE").keyup(function() {
        var userInput = $(this).val();
        lis.each(function(index, value) {
            $(value).toggle(list[index].indexOf(userInput) >= 0);
        });
    });
} else {
    $("#inputFALSE").keyup(function() {
        var userInput = $(this).val();
        lis.each(function(index, value) {
            $(value).toggle(list[index].indexOf(userInput) >= 0);
        });
    });
}
</script>

EDIT: -Got rid of if/else but now a new problem.

<script type="text/javascript">
    var lis = $(".cartInfosFALSE tr");
    var liss = $(".cartInfoTRUE tr");
    var list = $.makeArray(lis.map(function(k, v) {
                    return $(v).text().toLowerCase();
                }));

    $("#inputTRUE").keyup(function() {
        var userInput = $(this).val();
        liss.each(function(index, value) {
            $(value).toggle(list[index].indexOf(userInput) >= 0);
        });
    });

    $("#inputFALSE").keyup(function() {
        var userInput = $(this).val();
        lis.each(function(index, value) {
            $(value).toggle(list[index].indexOf(userInput) >= 0);
        });
    });

</script>

The first keyup does nothing and the second one works correctly.

You don't need `if/else` for this. Just attach different `keyup` handlers to each input. They will each fire only when the user is typing into that input. — Barmar, Apr 27 '16 at 16:38
Both your `keyup` handlers are doing stuff in the same table, not in different tables like your question says. — Barmar, Apr 27 '16 at 16:40
Thanks for responding, quick question. Is the `keyup` handler `$("#inputFALSE")` (as an example)? — user6104636, Apr 27 '16 at 16:42

spaceman · Accepted Answer · 2016-04-27T17:11:56.957

1

Just remove your if/else statement. This way an event listener is attached to each input and handled independently.

$("#inputTRUE").keyup(function() {
    // do stuff
});

$("#inputFALSE").keyup(function() {
    // do other stuff
});

jsfiddle example.

edited Apr 27 '16 at 17:11

answered Apr 27 '16 at 16:40

spaceman

1,147
8
15

I did this but still it doesn't work correctly. The first keyup does nothing and the second one works though. – user6104636 Apr 27 '16 at 16:49
I'm not able to get a fiddle working at all. I'll keep trying though – user6104636 Apr 27 '16 at 17:09
What browser are you trying it in? Works for me in Chrome, Firefox, Internet Explorer, Edge, Safari & Opera. – spaceman Apr 27 '16 at 17:16
it's because I was missing a letter....Working great now though. Thanks for your time! – user6104636 Apr 27 '16 at 17:22

score 1 · Answer 2 · edited May 23 '17 at 12:31

1

You don't need if / else, beter to use event listeners:

$('#inputTRUE').on('input', function () {
    // do something
});

$('#inputFALSE').on('input', function () {
    // do something else
});

little example here: https://jsfiddle.net/yk0sseL7/

(about using keyup and input events read here - jQuery 'input' event)

edited May 23 '17 at 12:31

Community

1
1

answered Apr 27 '16 at 16:43

Andrew Evt

3,613
1
19
35

How to use a javascript function depending on if else?

2 Answers2