How to beautify/refactoring this JavaScript codes?

Question

Previously I have questions asking about beautify js codes in this link, but this time i'm not sure how to beautify this code below because im using words instead of index numbers. (bolted words are the reason it is NOT SAME as my previous question)

Original JS Code

//food
$("#food_east").keyup(function () 
{
    samefunction();
});

$("#food_west").keyup(function () 
{
    samefunction();
});

$("#food_north").keyup(function () 
{
    samefunction();
});

$("#food_south").keyup(function () 
{
    samefunction();
});

//beverage
$("#beverage_east").keyup(function () 
{
    samefunction();
});

$("#beverage_west").keyup(function () 
{
    samefunction();
});

$("#beverage_north").keyup(function () 
{
    samefunction();
});

$("#beverage_south").keyup(function () 
{
    samefunction();
});

And this is only food and beverage, i have not include others such as candy, snacks etc because its too messy to dump all my codes here. I can only come up with this solution, is there better solution?

var compass = ["east", "west", "north", "south"];

    for(var i=0; i<3; i++)
    {
        var name = "#food_";
        name += compass[i];

        $(name).keyup(function () {
            samefunction();
        });

        var name = "#beverage_";
        name += lokasi[i];

        $(name).keyup(function () {
            samefunction();
        });
    }

Couldn't you use a class on all elements in question? Then you would only have to select using that class and assign the event handler. — Sirko, Nov 20 '17 at 09:23
You should pass the function name (reference) into `keyup`. `keyup(samefunction)` — evolutionxbox, Nov 20 '17 at 09:25
_"Beautifying"_ JavaScript does not mean what you think it means. It refers to formatting (whitespace, indentation, linebreaks...). Your case could be called _"refactoring"_. — yuriy636, Nov 20 '17 at 09:27
@anon it is my own question...it is DIFFERENT, pls refer to my edited question — LearnProgramming, Nov 20 '17 at 09:29
inside samefunction() function have another some function which leads to each of these — LearnProgramming, Nov 20 '17 at 09:32
I gave an example. Just in case, look at here: https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — evolutionxbox, Nov 20 '17 at 09:50

patrick · Answer 1 · 2017-11-20T09:32:57.273

1

This is why classes where invented... give every element that same class and bind the function to that class.

Another way could be to use the selector ‘starts with’: $(‘[id^=“food_”]’).keyup...

edited Nov 20 '17 at 09:32

answered Nov 20 '17 at 09:28

patrick

11,519
8
71
80

1

That's a comment, not an answer. – Jeremy Thille Nov 20 '17 at 09:30
@patrick which means it automatically identify food_west, food_east, food_north and food_south? – LearnProgramming Nov 20 '17 at 09:35
1

Yes, but also food_blablabla, so everything that starts with ‘food_’ – patrick Nov 20 '17 at 09:36
1

‘Give every event that same class and bind the function’ is an answer, not a comment... – patrick Nov 20 '17 at 09:36

score 1 · Accepted Answer · answered Nov 20 '17 at 09:36

Use a class, instead of one unique identifier per element. A class is like a group name. All elements with that class can be selected at once.

$(".someClass").keyup(function () {
    console.log("Keyup event!")
    // Do stuff
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="someClass" type="text" />
<input class="someClass" type="text" />
<input class="someClass" type="text" />
<input class="someClass" type="text" />
<input class="someClass" type="text" />
<input class="someClass" type="text" />

How to beautify/refactoring this JavaScript codes?

2 Answers2