Can Javascript onClick work with classes

Question

I can't work out this Javascript for the life of me. I need help with the following code, here is the snippet:

<div class="container">
  <input type="submit" class="clicktoshow" />

  <form class="hidden">
  </form>
</div>

I am going to be using an array in PHP to display multiple containers using the same code so I want to avoid id's.

Basically the form is hidden and I want it to show when submit is clicked, there will be alot of container divs, so I don't want the click to show ALL the forms, just the one aligned with the input / in its parent element.

Is this possible?

Any help please :|?

If you are new to JavaScript see this great resource as well. https://developer.mozilla.org/en-US/docs/Web/JavaScript Hope you find it useful. — Nope
– Nope, Commented Mar 11, 2014 at 10:05

Girish · Accepted Answer · 2014-03-11 10:52:20Z

1

Try this code

document.getElementsByClassName('clicktoshow')[0].onclick = function(Event){
     var form = Event.target.parentNode.children[1]; //form object 
     form.style.display = "block"; // form node action
};

If the class repeated in code then you will need to iterate event code Like

var cls = document.getElementsByClassName('clicktoshow');
for(var i in cls){
  cls[i].onclick = function(Event){ 
   var form = Event.target.parentNode.children[1]; //form object 
    form.style.display = "block"; // form node action
 };

}

DEMO

NOTE : The code will work in modern browsers.

edited Mar 11, 2014 at 10:52

answered Mar 11, 2014 at 10:18

Girish

12.2k3 gold badges37 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3405517 Over a year ago

Hey, could you please emphasis on //your code here? What do I do to get the form to work in the script? Thanks!

Girish Over a year ago

@user3405517 check updated code as well as demo link, hope the code will be helpful,

user3405517 Over a year ago

It worked! Thanks a bunch! If i could please bother you for one more question, is there a way I can make it disappear :|?

Arjun · Accepted Answer · 2014-03-11 10:04:34Z

0

Yes you can do this....

var element = document.getElementsByClassName('clicktoshow');

element.onclick = function(){
  var parent = element.parentNode;
  var form = parent.getElementByClassName('hidden');
}

answered Mar 11, 2014 at 10:04

Arjun

1,4391 gold badge13 silver badges33 bronze badges

Comments

Rohit Azad Malik · Accepted Answer · 2014-03-11 10:08:54Z

0

*Yes try this*

var clickClass= document.getElementsByClassName('clicktoshow');

clickClass.onclick = function(){
  // your code here
}

more info

more info link 2

edited Mar 11, 2014 at 10:08

answered Mar 11, 2014 at 9:59

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

4 Comments

user3405517 Over a year ago

When I put my code inside the function do I need to add anything? I'm sorry if i sounds blatantly noob, I am learning Javascript!

Rohit Azad Malik Over a year ago

Yes more about info than go here developer.mozilla.org/en-US/docs/Web/API/…

user3405517 Over a year ago

var clickClass= Document.getElementsByClassName('clicktoshow'); clickClass.onclick = function(){ <form> Show Content </form> } It doesn't seem to run am i missing something :\

Rohit Azad Malik Over a year ago

now go this link and read carefully all topic about javascript developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Collectives™ on Stack Overflow

Can Javascript onClick work with classes

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related