Increase img size and height onclick

user_12996405 0
Viewed 127

I am trying to create a function in javascript that will increase the size of the image clicked on. I am not sure why it is not letting me use rem in javascript but when I take rem away the number by itself still doesnt work.

html :

<div class="main-textbox-about">
                    <div class="main-textbox-about-saints">
                        <img src="images/Saint Slide/st-peter-2176658_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-1" onclick="highlight();">
                        <img src="images/Saint Slide/saint-stylianos-2191792_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-2">
                        <img src="images/Saint Slide/st-demetrius-2176682_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-3">
                        <img src="images/Saint Slide/archon-2086750_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-4">
                        <img src="images/Saint Slide/st-andrew-2176673_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-5">
                        <img src="images/Saint Slide/saint-john-the-baptist-1652345_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-6">
                        <img src="images/Saint Slide/st-paul-2176669_1280.jpg" class="main-textbox-about-saints-photos main-textbox-about-saints-photos-7">
                    </div>
                </div>

function highlight() {
    var img = document.querySelector(".main-textbox-about-saints-photos")
    img.innerHTML.style.height = 50;
    img.innerHTML.style.width = 40;
}
css html javascript
2 Answers

You can add a click listener on the container element of images and use event object to get the image that was clicked on and set its width and height.

values of width and height should be strings instead of numbers

const imgContainer = document.querySelector('.main-textbox-about-saints');

imgContainer.addEventListener('click', (e) => {
  e.target.style.height = '150px';
  e.target.style.width = '150px';
});
<div class="main-textbox-about">
  <div class="main-textbox-about-saints">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
  </div>
</div>

Edit

As per your comment, you only want one big image at a time. You can achieve this by keeping track of previously enlarged image and resetting its width and height whenever there's a click event

const imgContainer = document.querySelector('.main-textbox-about-saints');
let prevEnlargedImg;

imgContainer.addEventListener('click', (e) => {
  if (prevEnlargedImg) {
    prevEnlargedImg.style.height = '100px';
    prevEnlargedImg.style.width = '100px';
  }

  prevEnlargedImg = e.target;

  e.target.style.height = '150px';
  e.target.style.width = '150px';
});
<div class="main-textbox-about">
  <div class="main-textbox-about-saints">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
    <img src="https://picsum.photos/100">
  </div>
</div>

user_60943480

I have stolen an image grid on codepen and added the js for adding the highlight function. I've used the event argument 'e' to access target (element generating the click event) and setting the style directly to it. Probably you can consider a better approach with css classes, at least.

function highlight(e) {
  e.target.style.width="50px";
  e.target.style.height="80px";
}

//This line is just for adding click event using jquery, you don't need it
$('img').on('click', highlight)

https://codepen.io/SimCu/pen/abvPOwd

user_5146450
Related