Of Elements And Events

[george]

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)

[davelf]

sorry i don't get it. So you want the tag <h1> in a link?like this one?

<a href="#"> <h1>test</h1</a>

[Synook]

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.

[dsonesuk]

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>

[george]

<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.

[george]

<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.

[dsonesuk]

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.

[Synook]

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>

[dsonesuk]

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>