CODEWITHSUNDEEP
javascriptcss
ModS
ModS

Reputation: 846

On-click Box shadow Shadow - Javascript (not jquery)

I want a drop shadow to appear upon click of a image. I don't use Jquery at the moment so if possible provide a java-script solution. Heres my fiddle: http://jsfiddle.net/zUNhD/7/

I would also like for the box shadow to only be active on whatever item is Currently Selected. (the last item clicked should be the only one with the shadow)

    window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]
    console.log(img1);

    img1.onclick = function(){
    img1.setAttribute("class", "BoxShadow");
   };
   };

Upvotes: 1

Views: 7897

Answers (3)

selvagsz
selvagsz

Reputation: 3872

The function hasn't been called in your code.

window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0];      
img1.onclick = function(){
img1.setAttribute("class", "DropShad");
};
}();

Here is the working fiddle ... http://jsfiddle.net/zUNhD/18/

Upvotes: 2

Passerby
Passerby

Reputation: 10070

Extending from comment:

You can use :active selector to response to "click" event, and :focus selector to response to, well, "focus" event:

input:active, input:focus{
    box-shadow:2px 2px 2px blue;
}

fiddle

Upvotes: 2

KooiInc
KooiInc

Reputation: 122906

See this jsfiddle for some simplifications of your code. The css class wasn't assigned right, it should be preceded by a dot. Put your script tag near the ending </body> tag and use:

var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]

img1.onclick = function(){
  img1.className = "DropShad";
};

Upvotes: 1

Related Questions