'Enlarge image with Javascript

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";
    }
}
javascripthtml


Solution 1:[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);

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 prograk
Solution 2 Maik Lowrey

Related Questions