How to get event target/this without putting the event listener in the HTML tag?

Question

I'm not a big fan of putting my event listeners (specifically onclick in this case) in the HTML, mostly because I can't use

$(document).ready(function(){})

I would much rather define the buttons' onclick as I've commented it in the startup function. However, this doesn't refer to the clicked button when I put the listener in the script (I'm guessing because it doesn't "know" which button I clicked). I've tried setting event as a parameter to the showImage function, and finding the e.target inside it, but this didn't work either. Is there a way I can refer to the clicked button without having the onclick inside the HTML tag?

//$(document).ready(function() {
  window.onload = startup;
  function startup() {
    $("img").hide();
    //$("button").click(showImage(this));
  }
  function showImage(e) {
    var chosen = e.value;
    $('#' + chosen).fadeIn(500);
    $('img:not(#' + chosen + ')').hide();
  }
//});

body {background-color: #EFEFEF;}
#content {width: 80%; margin: auto; background-color: white; padding: 15px; font-family: "Century Gothic",sans-serif;}
img {height: 250px; border: solid 1px black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="pig" src="http://www.igjerstad.no/sites/default/files/styles/nodeimage/public/field/image/gris-750-5.jpg?itok=TJa-iUVg">
<img id="cow" src="https://www.matmerk.no/cms/images/3675/1200/1200/ku-nyt-norge.jpeg">
<img id="sheep" src="https://media.timeout.com/images/103778879/630/472/image.jpg">
<img id="hen" src="http://africahitz.com/wp-content/uploads/2017/01/hen-white-and-black-color.jpg">
<br>
<button value="pig" onclick="showImage(this)">Gris</button>
<button value="cow" onclick="showImage(this)">Ku</button>
<button value="sheep" onclick="showImage(this)">Sau</button>
<button value="hen" onclick="showImage(this)">Høne</button>

Thanks in advance!

PS. I would guess someone else has had this problem and maybe asked about it here. I did check if I could find a similar question on the site, but found nothing. However, I have failed to find that before, so I'm sorry if this is a duplicate.

PS2. The images in my code are not mine, nor do I have the rights for them. Please don't sue me ':D

PS3(!!). I'm not an experienced programmer, my terminology might be wrong some places. Feel free to correct me :)

Answer 1

Firstly you need to define function() in a click function so it should look like this:

    $("button").click(function() {
        //code to execute here
    });

Instead of this:

    $("button").click(//code to execute here);

When calling this in a button it will refer to the button and if I understand your code right, the image is hidden therefore if that is the button then you can't click a hidden image, if you're using a separate button to hide the image then in the click function you need to have e stated as the image element.

To use this you also need to call it as $(this) not just this.

Answer 2

this will be set inside the event handler as event.currentTarget Ref. If you are using jQuery you can make a jQuery object from it by doing $(this). So to get the value you can do:

var chosen = $(this).prop('value');

I have also added a class myclass to the buttons to select it using $('.myclass') so that this can be seperated from other possible buttons in the page. You can also do $('button') instead to select all buttons irrespective of the class.

UPDATE

Just saw your commented out code:

$("button").click(showImage(this)); // When a button is clicked
 // call the function returned by showImage(this).. err it doesnt return 
 // a function so it fails.

you should pass a function reference or simply a function name to the click event registration. like .click(showImage) without any function call (). In your code it will execute showImage(this) and bind the returned value to the event listener, which will apparently fail.

It should actually be:

$("button").click(showImage); // when a button is clicked
 // call the function showImage with this=<clicked button> and param=event

and this will be automatically set inside the function as event.currentTarget

$(document).ready(function() {
  window.onload = startup;
  function startup() {
    $("img").hide();
    //$("button").click(showImage(this));
  }
  function showImage(e) {
    var chosen = $(this).prop('value');
    $('#' + chosen).fadeIn(500);
    $('img:not(#' + chosen + ')').hide();
  }
  $('.myclass').on('click', showImage);
});

body {background-color: #EFEFEF;}
#content {width: 80%; margin: auto; background-color: white; padding: 15px; font-family: "Century Gothic",sans-serif;}
img {height: 250px; border: solid 1px black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="pig" src="http://www.igjerstad.no/sites/default/files/styles/nodeimage/public/field/image/gris-750-5.jpg?itok=TJa-iUVg">
<img id="cow" src="https://www.matmerk.no/cms/images/3675/1200/1200/ku-nyt-norge.jpeg">
<img id="sheep" src="https://media.timeout.com/images/103778879/630/472/image.jpg">
<img id="hen" src="http://africahitz.com/wp-content/uploads/2017/01/hen-white-and-black-color.jpg">
<br>
<button value="pig" class="myclass">Gris</button>
<button value="cow" class="myclass">Ku</button>
<button value="sheep" class="myclass">Sau</button>
<button value="hen" class="myclass">Høne</button>

Answer 3

This should work.

//$(document).ready(function() {
  window.onload = startup(); 
  function startup() {
   console.log("window loaded");
    $("img").hide();
    $("button").click(function() {showImage(this)});
  }
  function showImage(e) {
    console.log("onside eras");
    var chosen = e.value;
    $('#' + chosen).fadeIn(500);
    $('img:not(#' + chosen + ')').hide();
  }   
//});