CODEWITHSUNDEEP
javascript
Luky Dam
Luky Dam

Reputation: 21

JS function odblclick event

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.

Upvotes: 2

Views: 68

Answers (6)

Levi
Levi

Reputation: 859

$("#obr").dblclick( function() {
  $(this).toggleClass( "big" );
});
.big {
  height:400px;
  width:400px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img ID="obr" src="http://placekitten.com/300/300" width="300" height="300">

Upvotes: 1

rcoro
rcoro

Reputation: 326

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;
}
<div id="myDiv"></div>

Upvotes: 1

Sifat Haque
Sifat Haque

Reputation: 6057

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);
}
<img id="obr" src="https://picsum.photos/seed/picsum/200/300" width="200" height="300">

Upvotes: 1

palaѕн
palaѕн

Reputation: 73896

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:

<img ID="obr" src="pes.png" width="700" height="550" ondblclick="toggle()"

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;
}
<img ID="obr" src="http://placekitten.com/400/400" width="100" height="100" ondblclick="toggle()">

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

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;
}
<img id="obr" src="https://via.placeholder.com/150" ondblclick="toggle()">

Upvotes: 2

epascarello
epascarello

Reputation: 207501

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)" />

Upvotes: 2

Related Questions