Display image based on list item click

I have a list here when the list item is clicked the respective image should appear inside the aside. I need the function to get img src(href=””) and implement that into the img src. Here’s what I have so far:

<aside>
    <img src="" alt="" id="image">
</aside>
<div>
    <ul classes="test-images">
            <li><a onclick="event.preventDefault()" href="images/1.jpg">1</a></li>
            <li><a onclick="event.preventDefault()" href="images/2.jpg">2</a></li>
            <li><a onclick="event.preventDefault()" href="images/3.jpg">3</a></li>
            <li><a onclick="event.preventDefault()" href="images/4.jpg">4</a></li>
       </ul> 
</div>
<div>
    <ul classes="real-images">
            <li><a onclick="event.preventDefault()" href="images/1.jpg">1</a></li>
            <li><a onclick="event.preventDefault()" href="images/2.jpg">2</a></li>
            <li><a onclick="event.preventDefault()" href="images/3.jpg">3</a></li>
            <li><a onclick="event.preventDefault()" href="images/4.jpg">4</a></li>
       </ul> 
</div>
var changePic = evt => {
    var links = $("a");

    for (var i = 0; i < links.length; i++) {
        $(evt.currentTarget) = links[i];
        var image;
        document.getElementById('image').src = image;
        links.herf = image.src;
    }
}
$(document).ready(function(){
    var aElements = $("a");
    aElements.each(evt => {
    var image = $(evt.currentTarget).attr("href");

    aElements.click(changePic);
}


});

thank you for the help

Answer

var changePic = evt => {
    var links = $("a");

    for (var i = 0; i < links.length; i++) {
        $(evt.currentTarget) = links[i];
        var image;
        document.getElementById('image').src = image;
        links.herf = image.src;
    }
}

I guess there is error on this code:

  1. Im thinking var image; should be assigned to image tag which should be image = document.getElementById('image')

  2. links.herf = image.src; links is a list of anchor.

  3. Should assign the anchor href value to image src which should be image.src = links[i].href

This might work, since you are using jQuery

// Listen to anchor click
$('a').click(function(e) {
 // assign tag to variable
 var link = $(this);
 // Set image source base on anchor href attribute
 $('#image').attr('src', link.href)
})