Jump to content

Of Elements And Events


george
 Share

Recommended Posts

I wanted to give an h1 element an onclick event. Error! Obviously I read

Events are generated by the browser when the user clicks an element
too broadly. That, or an <h1> tag does not constitute an element. Have I misconstrued what an "Element" is, or are events only applicable to particular elements. This is a general understanding question please. I used an input tag as my "element" in place of the h1 tag I wanted to use. Was the h1 tag never an Element, or are events allowed only on specific elements. (Or, is a tag not necessarily encapsulating an element?)TIA(and bless you guys for helping keep me sane) Edited by george
Link to comment
Share on other sites

You can give any element, including a h1, any event handler (that is applicable, obviously no onchanges for headings). Can you show us the code that didn't work?Note - not everything can have an onclick attribute.Note - it is invalid to put a h1 inside an anchor.

Edited by Synook
Link to comment
Share on other sites

the contents of the page its headings, paragraph, tables div h1, h2,... span and so on are known as elementsh1 onclick event<h1 onclick="alert('BOO')">Click me and see what happens</h1>to run a function<script type="text/javascript">/*<![CDATA[*//*---->*/function dothis(){alert("BOOOO")}/*--*//*]]>*/</script> <h1 onclick="dothis()">Click me and see what happens</h1>

Link to comment
Share on other sites

<h1 onclick="alert('BOO')">Click me and see what happens</h1>
Seems you understood me. I am now getting my onclick event on my h1 tag. I'm not sure what I did wrong before, or how I fixed it, but I put in your
onclick="alert('BOO')"

and replaced your "alert('BOO')" with my

"Show()"

and my page was happy, did as it was told. Thanks - problem solved - happy camper.

Link to comment
Share on other sites

<h1 onclick="alert('BOO')">Click me and see what happens</h1>
Thanks, Turns out I had mismatched case in the javascript function name "Show" , and calling the function "show". Thanks - problem solved - happy camper.Have good days, all. Edited by george
Link to comment
Share on other sites

HA, HA, don't you just hate it! when that happens. That's why i use 'web developer' add on, for Firefox, it points out errors in 'Standard Compliance Mode', 'CSS' and 'Javascript', by displaying a red traffic light, with question mark. just click icon and it will display the error in question.

Edited by dsonesuk
Link to comment
Share on other sites

Firebug is very useful too, if there is a JS error it will immediately tell you with some useful debugging information.Note that it is considered good practice[citation needed] to separate your markup structure and script logic. Therefore, you would instead give the H1 an ID, and assign an onclick handler to the element with that ID. Also, note that by convention ordinary method, functions, and other variables are given lowercase names (e.g. show()) - only object prototypes should be capitalized (Show).

<script type="text/javascript">	function show() {		//...	}	document.getElementById("header").onclick = show;</script><!-- ... --><h1 id="header">Click</h1>

Link to comment
Share on other sites

i use firebug also, but mainly for css problem solving. web developer gives you lots more information about a web page, and a lot of other useful tools to work with. Then another good practice would be to put your script in external file as well, and link to it, "but, but, its only a few line of scripting code and html" would you really bother with that!your code would not work, first off all, the code would run, before the element is even created? so you would get an undefined error, and it wouldn't work anyway.if you want a working example<script type="text/javascript">/*<![CDATA[*//*---->*/function dothis(){alert("BOOOO")}function initiatescript(){a=document.getElementById("h_ref1");a.setAttribute("onclick", "dothis()");a.onclick= function() { eval("dothis()")};}window.onload=initiatescript;/*--*//*]]>*/</script> <h1 id="h_ref1"><div>Click me and see what happens</div></h1>

Edited by dsonesuk
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

×
×
  • Create New...