CODEWITHSUNDEEP
javascripthtml
BBoy
BBoy

Reputation: 13

get an Var with an onclick

I want to make every picture on my website bigger only on onclick event. Sure I can take for every Pic the Java code, but I want sth to open all pics with one command! Thanks

function pic(choice, click){
    p = choice;
    p.style.width = "200px";
}
<div onclick="pic('b1')" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: red;"></div>

<div onclick="pic('b2')" style="position: absolute; top: 100px; left: 500px; width: 100px; height: 100px; background-color: red;"></div>

Upvotes: 0

Views: 57

Answers (3)

Kevin N.
Kevin N.

Reputation: 173

Here's a simple jQuery example https://jsfiddle.net/thebeast/0e6yLk2h/

HTML:

   <div class="box one"></div>
   <div class="box two"></div>

CSS:

   .box {
     height: 50px;
     width: 50px;
   }

   .one {
     background-color: red;
   }

   .two {
     background-color: blue;
   }

   .large {
     width: 300px;
     height: 300px;
    }

JS:

   $('.box').click(function(e) {
      var box = e.target;
      $(box).toggleClass("large");
    })

Upvotes: 0

Saravanan I
Saravanan I

Reputation: 1229

You have to give the reference to the element in order to access that from JS. Try this, 

function pic(choice, click){
	p = document.getElementById(choice);
  p.style.width = "200px";
}
<div id="b1" onclick="pic('b1')" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: red;"></div>

<div id="b2" onclick="pic('b2')" style="position: absolute; top: 100px; left: 500px; width: 100px; height: 100px; background-color: red;"></div>

Upvotes: 1

Seblor
Seblor

Reputation: 7146

You can send the element calling the onClick event by sending this in the trigger, like this :

HTML :

<div onclick="pic(this)" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: red;"></div>

JS :

function pic(element){
  element.style.width = "200px";
}

Upvotes: 0

Related Questions