JS function odblclick event

Question

I need to resize the picture of a certain size, on first double click make it bigger, but on second double click make it the original size. It is a school homework and I am not good at JS and english is my third language, so please do not be mad. My img tag placed in body and JS functions.

    <img ID="obr" src="pes.png" width="700" height="50" ondblclick="big()" ondblclick="old()">

    function big()  {
                obr.width="750";
                obr.height="600";
    }

    function old()  {
            obr.width="700";
            obr.height="550";
    }

Works for just making the image bigger, but does not shrink back. I appreciate every comment. Thank you for yout time and help.

Answer 1

You can not have two event listeners attached to the element with attributes. So you need to keep track of the state inside of the function.

function toggleSize(img) {
  var currentSize = img.style.width
  var width = '200px'
  var height = '300px'
  if (currentSize === "200px") {
    width = '400px'
    height = '600px'    
  }
  img.style.width = width;
  img.style.height = height;
}

<img
  class="toggleImage"
  style="width: 200px; height: 300px;"
  src="http://placekitten.com/200/300"
  ondblclick="toggleSize(this)" />

Easier way is just to toggle a class

function toggleSize(img) {
  img.classList.toggle('large')
}

.toggleImage {
  width: 200px;
  height: 300px
}

.toggleImage.large {
  width: 400px;
  height: 600px
}

<img
  class="toggleImage"
  src="http://placekitten.com/200/300"
  ondblclick="toggleSize(this)" />