Enlarge image with Javascript-CodePudding

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

CodePudding user response：

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);

CodePudding user response：

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>