Jump to content

Learning Javascript - onclick doesn't work

Lucy

By Lucy
in JavaScript

 Share

Recommended Posts

Lucy Member

Lucy

Posted
Posted

So, I'm learning Javascript and tried out some code.

I'm not completely sure how to describe this. But, if I try to use onclick with a specific element, and the action for that is applied to that same element, it doesn't work. Here:

var maindiv = document.getElementById("main");var formfield = document.getElementsByTagName("input");function myfunction ()		{	maindiv.style.color="red";}formfield.onclick = myfunction ();

That works ^

var maindiv = document.getElementById("main");var formfield = document.getElementsByTagName("input");function myfunction ()		{	formfield.style.color="red";}formfield.onclick = myfunction ();

That doesn't ^

 

I'm very confused. Sorry about the rubbish explanation. Can anyone help? Thanks!

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

Ok, I see. So you can't target all input fields at once?

 

It isn't completely clear to me what you wish to do.

 

Are you saying that when you click in a form you want all of the input fields in that form to have red text?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

To target all you would have to loop through them using for loop

function myfunction ()        {var maindiv = document.getElementById("main");var formfield = document.getElementsByTagName("input");for (i=0; i<formfield.length; i++) // formfield.length give you total number of input fields, so while i is less than total increment by 1{formfield[i].onclick=function(){ //add onclick to all found inputsthis.style.color="red"; //and change color on click of input}}   }window.onload=function(){ //add onclick to input on complete loading of pagemyfunction ()}
you can target inputs by type, and those within a id ref container
function myfunction ()        {var maindiv = document.getElementById("main"); // pretend this is container divvar formfield = maindiv.getElementsByTagName("input"); // note change to target inputs in id ref container and not whole documentfor (i=0; i<formfield.length; i++) // formfield.length give you total number of input fields, so while i is less than total increment by 1{if(formfield[i].type=="button" || formfield[i].type=="submit") // target type of input, this could be also by className formfield[i].className == 'required'{formfield[i].onclick=function(){ //add onclick to found inputs within set id specific containerthis.style.color="red"; //and change color on click of input}}}   }window.onload=function(){ //add onclick to input on complete loading of pagemyfunction ()}
Edited by dsonesuk
Link to comment
Share on other sites
Lucy Member

Lucy

Posted
  • Author
Posted (edited)

 

It isn't completely clear to me what you wish to do.

 

Are you saying that when you click in a form you want all of the input fields in that form to have red text?

 

Well, I just thought that this:

var formfield = document.getElementsByTagName("input");

could be used to do whatever I wanted to all of the input fields. Like how you'd apply styles in css, just by using 'input' rather than having to target every single field. I suppose I'm just thinking about this in the wrong way.

 

dsonesuk -

Thanks, that's very helpful. :)

Edit - actually, it doesn't seem to be working :/ Apparantly a parenthesis was missing and now it's saying 'formfield.onclick is not a function' - and after some adjustment 'formfield is undefined'

Edited by Lucy
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

onclick events certainly do work, and are rather a separate topic from the question you have regarding selecting either one element or an array of elements. You can change an outer element and affect the styling of all inner elements.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>#wrap{width:800px;margin:0 auto;} .hilite{border:6px solid red;color:#0f0;background-color:yellow;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>window.onload = function(){ var list = document.getElementById('wrap').getElementsByTagName('DIV'); for (var i=0,len=list.length ; i<len ; i++){   list[i].onclick = hilite2; }}function hilite1(){ var list = document.getElementById('wrap').getElementsByTagName('DIV'); for (var i=0,len=list.length ; i<len ; i++){   list[i].style.border = '';   list[i].style.color = '#000';   list[i].style.backgroundColor = ''; } this.style.border = '6px solid red'; this.style.color = '#0f0'; this.style.backgroundColor = 'yellow';}function hilite2(){ var list = document.getElementById('wrap').getElementsByTagName('DIV'); for (var i=0,len=list.length ; i<len ; i++){   list[i].className = ''; } this.className = 'hilite';}</script></head><body><div id="wrap"><div id="d01"><h3>Div 01</h3><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p></div><div id="d02"><h3>Div 02</h3><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p></div><div id="d03"><h3>Div 03</h3><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p></div></div></body></html>
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

 

Well, I just thought that this:

var formfield = document.getElementsByTagName("input");

could be used to do whatever I wanted to all of the input fields. Like how you'd apply styles in css, just by using 'input' rather than having to target every single field. I suppose I'm just thinking about this in the wrong way.

 

Don't think, know. Look at the documentation.

https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName

http://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

 

It returns a (array-like) collection. As in the W3Schools example, you have to loop through each element and do what you need to do that way.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Similarly you could use 'form elements collection' for form elements only http://www.w3schools.com/jsref/coll_form_elements.asp

function myfunction ()        {var mainform = document.getElementById("mainForm"); // pretend this is container Formfor (i=0; i<mainform.elements.length; i++) // mainform.elements.length give you total number of form element fields, so while i is less than total increment by 1{if(mainform.elements[i].type=="button" || mainform.elements[i].type=="submit") // target type of input, this could be also by className mainform.elements[i].className == 'required'{mainform.elements[i].onclick=function(){ //add onclick to found inputs within set specific formthis.style.color="red"; //and change color on click of input}}}   }window.onload=function(){ //add onclick to input on complete loading of pagemyfunction ()}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...