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.

    

    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.

user_14104 · Answer

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

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
}

user_7867822 · Answer

You can use a separate css class and toggle it like below:

var img = document.getElementById("obr")

function toggle() {
  img.classList.toggle("large")
}

img {
  height: 700px;
  width: 550px;
}

img.large {
  height: 750px;
  width: 600px;
}

user_1823841 · Answer

We can not have the same event handler twice on same element. If you want to toggle between values you can add just one ondblclick like:



and then update js code like:

function toggle()  {
   obr.width= obr.width == 700 ? 750 : 700;
   obr.height = obr.height == 550 ? 600 : 550;
}


assuming you have already declared a variable named obr for this image.

DEMO:



const obr = document.getElementById('obr');
function toggle() {
  obr.width = obr.width == 100 ? 400 : 100;
  obr.height = obr.height == 100 ? 400 : 100;
}

user_5146848 · Answer

Here i've used css scale property and just toggled a class. Hope this will be easier to understand.

const img = document.querySelector('#obr');

img.addEventListener('dblclick', function (e) {
  img.classList.toggle('large');
});

#obr {
  transform: scale(1);
  transform-origin: 0 0;
  transition: transform .6s;
}

#obr.large {
  transform: scale(2);
}

user_2789533 · Answer

Hi you could use toggle, one example:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('dblclick', () => myDiv.classList.toggle('div-new'));

div {
  background-color: blue;
  width: 50px;
  height: 50px;
}

.div-new {
  width: 100px;
  height: 100px;
}

user_8700522 · Answer

$("#obr").dblclick( function() {
  $(this).toggleClass( "big" );
});

.big {
  height:400px;
  width:400px
}

JS function odblclick event

6 Answers