Wsrtjtyk

I am currently making a dynamic webpage and trying to run multiple functions whenever the element with the class=application is clicked. The below code works but it's very repetitive.

$(document).on("click", ".application", renderImage);

$(document).on("click", ".application", renderText);

$(document).on("click", ".application", renderCodeButton);

$(document).on("click", ".application", renderAppButton);

I attempted to put these functions within one master function and run that with the .on() however as I use $(this).attr to pull information nesting the render functions within a master function ruins the scope.

Here is the renderImage function, though they are all very similar:

function renderImage () {

  $(".appPicture").empty();

  console.log(this);

  let applicationPic = $(this).attr("data-image")

  let img = $("<img>");

  img.addClass("appPic")

  img.attr("src", applicationPic);

  $(".appPicture").append(img);

}

Is there a way to run multiple functions with a single click event or a way to nest functions within a master without impacting the scope?

$(document).on("click", ".application", function(){

    let scope = this;

    renderImage(scope);

    renderText(scope);

    renderCodeButton(scope);

    renderAppButton(scope);

});



function renderImage (scope) {

    $(".appPicture").empty();

    console.log(scope);

    let applicationPic = $(scope).attr("data-image")

    let img = $("<img>");

    img.addClass("appPic")

    img.attr("src", applicationPic);

    $(".appPicture").append(img);

}

you can do something like this