Search code examples
javascripthtmlcssdomevent-listener

How to change Image & Content on button click

I have a layout that has a big, full-height image on the left side and a 6 grid-cell layout on the right side.

The grid cell layout should act like buttons which change the image on the left side when you click on the cells.

I'm new to JS, know just a bit about DOM Manipulation. So I don't know where to start.

Here's the layout: Layout Overview

Thanks for helping me! :)

const tourOne = document.getElementById('gridcell-604c88677d');
tourOne.onclick = changeImage();

function changeImage() {
console.log('hello world');
}
Solution

  • Without jquery, you can change it

    let img = document.getElementById('main_image');
img.src = "https://via.placeholder.com/100";

    Please see this codepen example: https://codepen.io/jakir-sajib-hossen/pen/YzpgjrN