Creating Functions in JQuery to Avoid Writing the Same Code Again

Question

I am currently using a Twitch API that receives information about a specific channel then prepends it to the HTML document. The code that prepends the information is used over and over. I was wondering how exactly do you create a function that could avoid repetition and be called throughout the document?

The codepen can be found here: http://codepen.io/sibraza/pen/AXRRvq

Here is the JQuery Code thats gets used repeatedly:

$("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")

Would something like this work:

function addThis(){

        $("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>")

   }

And then I can could call addThis() after each $.getJSON request.

Rory McCrossan · Accepted Answer · 2016-07-04 08:33:30Z

1

It would work, but you need to pass name, logo and status as parameters to the function. You can also remove the redundant string concatenation:

function addThis(name, logo, status) {
    $("#follower-Info").prepend('<div class="row"><div class="col-md-4"><img src="' + logo + '"></div><div class="col-md-4">' + name + '</div><div class="col-md-4">' + status + '</div></div>');
}

Then you can call it from within your $.getJSON handler:

addThis('Foo', 'bar.jpg', 'online');

answered Jul 4, 2016 at 8:33

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

Codes316 Over a year ago

How come using addThis(logo, status, name) under each handler doesn't work correctly? Those three parameters are declared locally under each handler.

Rory McCrossan Over a year ago

Without seeing your code I would guess they are not in scope of the function.

Codes316 Over a year ago

The code can be seen if you visit the link to the codepen: codepen.io/sibraza/pen/AXRRvq

Rory McCrossan Over a year ago

You define the addThis() function in that code, but you never call it.

Codes316 Over a year ago

Okay, I was able to figure out what I did wrong. The order of the parameters was incorrect.

Collectives™ on Stack Overflow

Creating Functions in JQuery to Avoid Writing the Same Code Again

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related