How to write 1 function for 4 pictures?

Question

css

There are 4 photos that, when clicked, should change and the words, when clicked, return the first (or the next and then the first again), I wrote the function, but when you click on 2 3 4, only the first picture changes.
I know that creating 4 functions is stupidity.

<a href="#"><img   id="image" onclick="changeImage()" src="img/like.png"></a>

function changeImage() {
  var image = document.getElementById('image');

  if(image.src.match("img/like.png")) {
    image.src = "img/like-full.png";
  }
  else {
    image.src = "img/like.png";
  }
}

and so on 4 pictures.
How to do it right?

Answer 1

<a href="#"><img   id="image" onclick="changeImage(this)" src="img/like.png"></a>

function changeImage(elem) {...
Then you work with elem

Answer 2

Pass a unique id for each image to the function or use the class

Answer 3

Something like this, maybe somewhere I made a mistake, did not check.

<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">
<img class="image"  src="img/like.png">

var images = document.querySelectorAll('.image');
images.forEach(function(image) {
  image.addEventListener('click', function(e) {
   if(e.target.src.match("img/like.png")) {
    e.target.src = "img/like-full.png";
  }
  else {
    e.target.src = "img/like.png";
  }
 })
})

Answer 4

I thought, and here it is, the simplest, it’s probably nowhere easier already, I came up with a circular slider. Can it be simplified somehow? Huh, I can't do it anymore

<style>
      .one-line-slider > img{
        max-width: 320px;
        height: auto;
        display:none;
      }
      
      .one-line-slider > img:first-child{
        display:block;
      }
    </style>
    <script>
      $(document).ready(function(){
  
        $(".one-line-slider img").on("click", function(e){
          $(this).hide().next("img").show();
        });		
        $(".one-line-slider img:last").on("click", function(e){
          $(this).hide().siblings("img:first").show();
        });			
      });
    </script>
    <div class="one-line-slider">
      <img src='slides/1.jpg'>
      <img src='slides/2.jpg'>
      <img src='slides/3.jpg'>
      <img src='slides/4.jpg'>
    </div>

UPD: figured out how to simplify js

$(".one-line-slider img").on("click", function(e){
    if($(this).index() == $(".one-line-slider img").length-1)
      $(this).hide().siblings("img:first").show();
    else
      $(this).hide().next("img").show();
  });