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
– Barmar, Commented Apr 27, 2016 at 16:38
Both your keyup handlers are doing stuff in the same table, not in different tables like your question says. — Barmar
– Barmar, Commented Apr 27, 2016 at 16:40
Thanks for responding, quick question. Is the keyup handler $("#inputFALSE") (as an example)? — user6104636
– user6104636, Commented Apr 27, 2016 at 16:42

spaceman · Accepted Answer · 2016-04-27 17:11:56Z

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, 2016 at 17:11

answered Apr 27, 2016 at 16:40

spaceman

1,1678 silver badges16 bronze badges

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

4 Comments

user6104636 Over a year ago

I did this but still it doesn't work correctly. The first keyup does nothing and the second one works though.

user6104636 Over a year ago

I'm not able to get a fiddle working at all. I'll keep trying though

spaceman Over a year ago

What browser are you trying it in? Works for me in Chrome, Firefox, Internet Explorer, Edge, Safari & Opera.

user6104636 Over a year ago

it's because I was missing a letter....Working great now though. Thanks for your time!

Community · Accepted Answer · 2017-05-23 12:31:20Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 27, 2016 at 16:43

Andrew Evt

3,6891 gold badge22 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to use a javascript function depending on if else?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related