Enlarge image with Javascript

Question

I have to Enlarge an image by 20px by clicking on the plus button, and shrink it by 20 clicking the minus button. The maximum width of the image is 500px, and the minimum is 250px.

<div id="doc">
  <div id="buttons">
    <button id="plus" onclick="imagePlus()">+</button>
    <button id="moins" onclick="imageMinus()">-</button>
  </div>
  <img id="sun" src="images/soleil.jpg" alt="soleil" />
</div>

I tried using clientWidth to get the current width of the image and increment it, but it seems it doesn't work

var imagePlus = function() {
    var img = document.getElementById("sun");
    var currWidth = img.clientWidth;
    if(currWidth == 500){
        null
    } else{
        img.style.width = (currWidth + 20) + "px";
    }
}

var imageMinus = function() {
    var img = document.getElementById("sun");
    var currWidth = img.clientWidth;
    if(currWidth == 250){
        null
    } else{
        img.style.width = (currWidth - 20) + "px";
    }
}

prograk · Accepted Answer · 2022-03-13 17:14:11Z

1

You need to add Event listener to plus and minus buttons by this way or you can also add onclick events on plus and minus button as well.

const imagePlus = function () {
  var img = document.getElementById("sun");
  var currWidth = img.clientWidth;
  if (currWidth == 500) {
    null;
  } else {
    img.style.width = currWidth + 20 + "px";
  }
};

const imageMinus = function () {
  var img = document.getElementById("sun");
  var currWidth = img.clientWidth;
  if (currWidth == 250) {
    null;
  } else {
    img.style.width = currWidth - 20 + "px";
  }
};

document.querySelector("#plus").addEventListener("click", imagePlus);
document.querySelector("#minus").addEventListener("click", imageMinus);

answered Mar 13, 2022 at 17:14

prograk

5714 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MrCantCode Over a year ago

Sorry I didn't wrote it in my post but i already added an eventListeners (less optimize than yours so thankyou) the problem come from the increment of currWidth, instead of +20px, it does +40px, and decrement just doesn't work at all

Maik Lowrey · Accepted Answer · 2022-03-13 17:15:26Z

1

Your code looks good. Only what missing is the eventListener. I added inline. You can add in your JS code block if you like more.

working example

var imagePlus = function() {  
    var img = document.getElementById("sun");
    var currWidth = img.clientWidth;
    if(currWidth == 500){
        return false;
    } else{
        img.style.width = (currWidth + 20) + "px";
    }
}

var imageMinus = function() {
    var img = document.getElementById("sun");
    var currWidth = img.clientWidth;
    if(currWidth == 250){
        null
    } else{
        img.style.width = (currWidth - 20) + "px";
    }
}

<div id="doc">
  <div id="buttons">
    <button id="plus" onclick="imagePlus()">+</button>
    <button id="moins" onclick="imageMinus()">-</button>
  </div>
  <img id="sun" src="https://via.placeholder.com/300" alt="soleil" />
</div>

answered Mar 13, 2022 at 17:15

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

1 Comment

MrCantCode Over a year ago

Sorry I didn't wrote it in my post but i already added an eventListeners (less optimize than yours so thankyou) the problem come from the increment of currWidth, instead of +20px, it does +40px, and decrement just doesn't work at all

Collectives™ on Stack Overflow

Enlarge image with Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related