Many onClick handlers that all append different text to one textarea

Question

The script basically just appends the words based on the user's click/s on the textarea. I just need some help improving my code further using the .on("click", function{}) and making it shorter.

$(document).ready(function() {
 $("#add_user").on("click",function() {
 $("#textareaFixed").append("Lorem");
 });
 $("#add_disallow").on("click",function() {
 $("#textareaFixed").append("Ipsum");
 });
 $("#add_wild").on("click",function() {
 $("#textareaFixed").append("Dolor");
 });
 $("#add_comment").on("click",function() {
 $("#textareaFixed").append("Hey");
 });
 $("#add_bb").on("click",function() {
 $("#textareaFixed").append("World");
 });
 $("#add_gdrive").on("click",function() {
 $("#textareaFixed").append("Its Time");
 });
 $("#add_gimage").on("click",function() {
 $("#textareaFixed").append("To Move");
 });
 $("#add_gnews").on("click",function() {
 $("#textareaFixed").append("Again");
 });
 $("#add_bash").on("click",function() {
 $("#textareaFixed").append("Thats it");
 });
 })

Answer 1

We can reduce duplication by using an object as a dictionary, and look up an output value based on an element's ID.

var messageMap = {
 "add_user": "Lorem",
 "add_disallow": "Ipsum",
 "add_wild": "Dolor",
 "add_comment": "Hey",
 "add_bb": "World",
 "add_gdrive": "Its Time",
 "add_gimage": "To Move",
 "add_gnews": "Again",
 "add_bash": "Thats it"
};
$(document).ready(function() {
 $.each(messageMap, function(key, value){
 $("#" + key).on("click",function() {
 $("#textareaFixed").append(messageMap[$(this).attr("id")]);
 });
 });
});

• Kim Oliveros: hmm makes sense.. I think this is a huge improvement on my code.. marking this as the answer thanks for the response mate :)