CODEWITHSUNDEEP
javascripthtml
MrCantCode
MrCantCode

Reputation: 31

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

Upvotes: 2

Views: 192

Answers (2)

Maik Lowrey
Maik Lowrey

Reputation: 17586

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>

Upvotes: 1

prograk
prograk

Reputation: 571

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

Upvotes: 1

Related Questions