Jump to content

More Than One Onclick = Weird Behaviour

chibineku

By chibineku
in JavaScript

Recommended Posts

chibineku Dedicated Member

chibineku

Posted
Posted

Hiya. I have just adapted a bit of code to make two functions run from a single onclick (using the obvious method of having an intermediate function call the two I want), but now one function opens in a new window (or takes up all the window, depending on browser) and the other just doesn't run at all. Here is the complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">div.container{width:80%;margin:1% 10% 1% 10%;border:1px solid gray;line-height:150%;}div.header{	height:10%;	padding:0.5em;	color:#DDDDDD;	background-color:#DDDDDD;	margin: 0% 0% 2% 0%;}div.footer{	height:10%;padding:0.5em;color:#DDDDDD;background-color:#DDDDDD;clear:left;margin: 2% 0% 0% 0%;}h1.header{padding:0;margin:0;}div.left{	float:left;	width:auto;	margin:0;	padding:1em;	background-color:#000;}div.right{	float:right;	width:auto;	padding:1em;	margin-left: 20px;	height: 100%;	min-height: 500px;}div.content{	width:80%;	min-height:500px;	padding:1em;	margin-left: 5%;	margin-right: 15%;}img.logo {	position: relative;}h2 {	white-space: pre-wrap;       /* css-3 */	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */	white-space: -pre-wrap;      /* Opera 4-6 */	white-space: -o-pre-wrap;    /* Opera 7 */	word-wrap: break-word;       /* Internet Explorer 5.5+ */	line-height:100%;	width:80%;	padding:1em;	margin-left: 5%;}p.wrap{	white-space: pre-wrap;       /* css-3 */	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */	white-space: -pre-wrap;      /* Opera 4-6 */	white-space: -o-pre-wrap;    /* Opera 7 */	word-wrap: break-word;       /* Internet Explorer 5.5+ */	line-height:100%;	width:100%;	padding:1em;	margin-left: 5%;	text-align: justify;	margin-right: 5%;}p.table {	color: #DBDBDB;	font-variant: small-caps;	background-color:#000;	cursor: pointer;}p.huh{	cursor: help;	color: #000;	font-variant: small-caps;	background-color:#000;	}	p.huh:hover {		color:#C8140B;		cursor:help;	}a {	color: #DB0A0A;	text-decoration: none;}a.table {	color: #DBDBDB;	font-variant: small-caps;	background-color:#000;}.hlink p{cursor:help;color:#000;}a.huh:link {	cursor: help	color: #000;	font-variant: small-caps;	background-color:#000;	color: #000;	}	a.huh:visited {	cursor: help	color: #000;	font-variant: small-caps;	background-color:#000;	}	a.huh:hover {		color:#C8140B;		cursor:help;			}	a.huh:active {	cursor: help	color: #000;	font-variant: small-caps;	background-color:#000;	color: #C8140B;	cursor: help;	}table.menu {	table-layout: automatic;}</style></style><script type="text/javascript">function changeSection(content) {  xmlDoc.async=false;  xmlDoc.load(content + ".xml")  result = xmlDoc.getElementsByTagName("CONTENT")[0].childNodes[0].nodeValue;  document.getElementById("content").innerHTML = "<p class='wrap'>" + result + "</p>";}</script><script type="text/javascript">var xmlDoc;if (window.ActiveXObject){// code for IExmlDoc=new ActiveXObject("Microsoft.XMLDOM");}else if (document.implementation.createDocument){// code for Mozilla, Firefox, Opera, etc.xmlDoc=document.implementation.createDocument("","",null);}else{alert('Your browser cannot handle this script');}xmlDoc.async=false;xmlDoc.load("filmarchive.xml");var x=xmlDoc.getElementsByTagName("FILM");function show(i){xmlDoc.async=false;xmlDoc.load("filmarchive.xml");img=(x[i].getElementsByTagName("IMG")[0].childNodes[0].nodeValue);title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue);review=(x[i].getElementsByTagName("REVIEW")[0].childNodes[0].nodeValue);txt="<img src='"+img+"' align=left hspace=12 vspace=10> Title: "+title+"<br />Date: "+date+"<br />Review:"  ;document.getElementById('content').innerHTML=txt+"<div class='content'><p class='wrap'>"+review+"</div>";}</script><script type="text/javascript">function multiFilm(){	film();	changeSection('film');}</script></head><body><div class="container"><div class="header"> <script type="text/javascript">{  var myWidth = 0, myHeight = 0;  if( typeof( window.innerWidth ) == 'number' ) {    //Non-IE    myWidth = window.innerWidth;    myHeight = window.innerHeight;  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {    //IE 6+ in 'standards compliant mode'    myWidth = document.documentElement.clientWidth;    myHeight = document.documentElement.clientHeight;  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {    //IE 4 compatible    myWidth = document.body.clientWidth;    myHeight = document.body.clientHeight;  }a=myWidth;b=(a/2);c=(b-321);d=(myWidth/10);e=(c-d);document.write("<img class=\"logo\" src='http://www.sinaesthesia.co.uk/sinlogogif.gif' alt='logo' width='618' height='58' left='"+e+"'>");}</script></div><div class="left">	<p class ="table" onclick="changeSection('welcome')">welcome</p>	<p class ="table" onclick="changeSection('news')">news</p>  <p class ="table" onclick="changeSection('literature')">literature</p>  <p class ="table" onclick="changeSection('images')">images</p>  <p class ="table" onclick="multiFilm()">film</p>  <p class ="table" onclick="changeSection('drink')">drink</p>  <p class ="table" onclick="changeSection('funny')">funny</p>  <p class ="table" onclick="changeSection('learn')">learn</p>  <p class ="table" onclick="changeSection('about')">about</p>  <p class ="table" onclick="changeSection('thisweek')">this week...</p>  <p class ="table" onclick="changeSection('past')">past</p>  <p class ="table" onclick="changeSection('present')">present</p>  <p class ="table" onclick="changeSection('future')">future</p>  <p class ="table" onclick="changeSection('contact')">contact</p><p class ="table" onclick="changeSection('huh')">?</p> </div><div class="right"><script type="text/javascript">function film(){document.write("<table border='1'>");for (var i=0;i<x.length;i++){ document.write("<tr onclick='show(" + i + ")'>");document.write("<td>");document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue);document.write("</td>");document.write("</tr>");}document.write("</table>");}</script></div><div class="content" id="content"><h2>Free Web Building Tutorials</h2><p class="wrap">At W3Schools you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p><p class="wrap">W3Schools - The Largest Web Developers Site On The Net!</p></div><div class="footer">Copyright 1999-2005 by Refsnes Data.</div></div></body></html>

The bit in question is the 'film' menu item. It calls the function multiFilm() in the header which is supposed to make function changeSection(content) run (header) and function film() run (right div). I guess it would be easy to add a document.getElementById...innerHTML= thing to write the script in the correct div, but it shouldn't be necessary.As always, any thoughts are greatly appreciated. Oh, and try to ignore all the stupid stuff about the logo...for some bloody reason it won't center like a good gif. I'm not done with any of the page, it's just a testing ground. Want to know what I can do before I design the real thing, and so far, I can't do a whole lot...

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

You have a lot of problems on your page.Here's a redundant </style> tag

</style></style>

This is also redundant, you can put all your scripts within the same two <script> tags, or preferrably in a separate .js file. You have a few of these in your file:

</script><script type="text/javascript">

The opening brace at the end of this line is likely to make your script run strangely:

<script type="text/javascript">{

But most important of all, here's the critical point:

<script type="text/javascript">function film(){document.write("<table border='1'>");for (var i=0;i<x.length;i++){document.write("<tr onclick='show(" + i + ")'>");document.write("<td>");document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue);document.write("</td>");document.write("</tr>");}document.write("</table>");}</script>

document.write() is a bad method for putting code into the page. If you run this method after the page has loaded, it will erase all the rest of the content of the page before writing its own.There are two solutions:

  1. Don't put it within a function and just run it as the page is loading (which should work fine, as far as I can see)
  2. Instead of using document.write(), change the innerHTML of an element on the page.

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
  • Author
Posted
You have a lot of problems on your page.Here's a redundant </style> tag
</style></style>

This is also redundant, you can put all your scripts within the same two <script> tags, or preferrably in a separate .js file. You have a few of these in your file:

</script><script type="text/javascript">

The opening brace at the end of this line is likely to make your script run strangely:

<script type="text/javascript">{

But most important of all, here's the critical point:

<script type="text/javascript">function film(){document.write("<table border='1'>");for (var i=0;i<x.length;i++){document.write("<tr onclick='show(" + i + ")'>");document.write("<td>");document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);document.write("</td>");document.write("<td>");document.write(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue);document.write("</td>");document.write("</tr>");}document.write("</table>");}</script>

document.write() is a bad method for putting code into the page. If you run this method after the page has loaded, it will erase all the rest of the content of the page before writing its own.There are two solutions:

  1. Don't put it within a function and just run it as the page is loading (which should work fine, as far as I can see)
  2. Instead of using document.write(), change the innerHTML of an element on the page.

Hi Ingol - thanks for the quick reply.I stole that entire script from the W3C site, from their example of a CD catalogue. It did work initially, when I didn't have it defined as a function. It only opened a small table in the right sidebar div. It's only since putting it in a function that it clears the page. However, I will try to adjust it all to be innerHTML. I don't want it to run as the page is loading because I don't want that table there all the time - it's only relevant for the 'film' page. Thanks for pointing out a couple of the other problems. Like I said, it's only a practice page, but I guess it's worth fixing problems as early as possible so that I can avoid repeating them in future. I didn't know you could put more than one script in the same tags. As for those curly brackets...it must've been aliens. Yeah, that's it...aliens. Scrambling my code. Muchos gracias, as always.
Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
  • Author
Posted

Okay, I've just turned the script into a function that, when called, writes the whole script (innerHTMLs it) to the div I want. Didn't work. I don't really know why, but there are quite a few possibilities:

  • conflicting punctuation (so I used forward slashes whenever I met a " or {
  • the possibility that by writing a script to a div I'd simply end up displaying the script as normal text
  • the whole thing is impossible...
  • you maybe can't change innerHTML to text that includes line breaks without specifying <br />
  • others

Here is the new, modified script:

<script type="text/javascript">function film(){	document.getElementById("right").innerHTML="<div class=\"right\"><script type=\"text/javascript\">	\{document.write(\"<table border='1'>\");for (var i=0;i<x.length;i++)\{ document.write(\"<tr onclick='show(\" + i + \")'>\");document.write(\"<td>\");document.write(x[i].ge\tElementsByTagName(\"TITLE\")[0].childNodes[0].nodeValue);document.write(\"</td>\");document.write(\"<td>\");document.write(x[i].getElementsByTagName(\"DATE\")[0].childNodes[0].nodeValue);document.write(\"</td>\");document.write(\"</tr>\");\}document.write(\"</table>\");<\div></script>"\}}</script>

Another day another stupid idea from yours truly.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

A few things:1. You don't need to escape brackets, don't put a slash before them.2. Javascript doesn't support multi-line strings, you need to end it on each line and start on the next. e.g.:

document.getElementById("right").innerHTML="<div class=\"right\"><script type=\"text/javascript\">\n" +"document.write(\"<table border='1'>\");\n" +"for (var i=0;i<x.length;i++)\n" +...

3. I don't think a script written using innerHTML will actually get executed. You can verify that with a basic alert script.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted
3. I don't think a script written using innerHTML will actually get executed. You can verify that with a basic alert script.
I seem to remember trying something like this, maybe a year ago. If I remember, some browsers liked it, some did not. So don't be satisfied with one positive result (if you get one). Make sure you test as many browser families as you can.
Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
  • Author
Posted
I seem to remember trying something like this, maybe a year ago. If I remember, some browsers liked it, some did not. So don't be satisfied with one positive result (if you get one). Make sure you test as many browser families as you can.
that's a good point, and I have actually DLed Safari, Opera and Chrome in addition to FF and IE (and IE through AOL). Most don't like even the easy, normal bits of code. FF is the most flexible of them all. IE through AOL used to be really robust and run just about anything. I have seen quite a few mentions of using the strict DTD to make older code work...that seems backwards, given the name (strict is, you know...strict). What's the story on those, just out of interest?I will take your advice, Ingolme, and try a basic alert script, but you seem to know a lot and if you doubt it'd work, you're probably right. Perhaps I am trying to be too smart when a) I don't have the knowledge to back it up and :) it mightn't work in the first place. It's hard to know the limitations, I just assume that if I can think of it, it can be done. Anyway, my JS Bible should arrive this week and I'll start back at the beginning. How did you two learn DHTML? Was it, as I have been trying, through a combination of basic code and hacking it or college courses, or..? I would like to eventually be able to put together websites as complex as they come, but it's such a wide field and I am not in a position to start a proper course in it.
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I've got a degree in computer science, but we didn't have any classes that specifically covered Javascript, just general programming techniques. Books and tutorials help, but nothing can replace just trying things to see how they work. That's where a good debugger comes into play.

Link to comment
Share on other sites
chibineku Dedicated Member

chibineku

Posted
  • Author
Posted
I've got a degree in computer science, but we didn't have any classes that specifically covered Javascript, just general programming techniques. Books and tutorials help, but nothing can replace just trying things to see how they work. That's where a good debugger comes into play.
If I may lower the tone a little:debugger - lawlzAhem.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...