0

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');
}
Zweirad
  • 3
  • 2

2 Answers2

0

With this jQUery code, you can change the source of the image on a button click. Put this line inside your function of changeImage().

$("#gridcell-604c88677d").attr("src","second.jpg");

Source

Syed Arsalan Hussain
  • 425
  • 4
  • 18
0

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

Jakir Hossen
  • 451
  • 4
  • 13
  • okay that basically solves it I think but I have no img attribute I have a section and set it's background to an image. How do I reference it in JS? Thanks! – Zweirad Mar 15 '21 at 08:18
  • if your section class = image-continer then => document.querySelector('.image-continer').style.backgroundImage = "url('https://via.placeholder.com/100')"; – Jakir Hossen Mar 15 '21 at 08:34