Simple script not working in firefox?

evilguru · 03-14-2005, 07:39 PM

Well, this is odd, a simple javascript I made works fine in ie but not in firefox and I am not sure why at all. Here is the very simple script.

Code:

<html>
<head>
<title>123</title>
<script type="text/javascript">
function 123() {
var a = new Array("1", "2", "3");
for (i=0;i<3;i++) {
document.write(a[i]);
}
}
</script>
</head>

<body onload="123();">
</body>
</html>

In firefox I just see 1, so it seems to do the loop once then stop does anyone have any ideas?

hemebond · 03-14-2005, 08:09 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>54410</title>
		<script type="text/javascript">
			function no()
				{
				var a = new Array("1", "2", "3");
				for (var i = 0; i < 3; i++)
				{
					document.write(a[i]);
				}
			}
		</script>
	</head>
	<body onload="no()">
	</body>
</html>

Works for me.

_Aerospace_Eng_ · 03-14-2005, 08:11 PM

for one functions shouldn't be started with numbers some browsers freak out, 2 the reason it didn't work in FF was because i wasn't defined, here is another way of doing it

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<html>
<head>
<title>123</title>
<script type="text/javascript">
function no123(i) {
var a = new Array("1","2","3");
for (i=0;i<3;i++) {
document.write(a[i]);
}
}
</script>
</head>

<body onload="no123();">
</body>
</html>

evilguru · 03-14-2005, 08:23 PM

Thanks

Wasn't 'i' defined in for (i=0;1<3;i++)?? Sorry, I come from the PHP side of things and it is these tiny syntax differences whiich are getting me.

_Aerospace_Eng_ · 03-14-2005, 08:25 PM

its gotta be initialized some how, notice how hemebond put var i making it a variable there, and me putting it in the () in the function name also made it a variable

rwedge · 03-14-2005, 11:42 PM

Just a heads up, if you use the onload in the body tag to run the script a new document is made with the contents of 123 - minus any html in the original document. Also, is it good practice to write to the document out of the head?

/Bob

_Aerospace_Eng_ · 03-14-2005, 11:48 PM

i think it was just a test but yes if you wanted a document.write to appear in a certain part of the page then u could put it where u wanted it, but ur right about the onload in the body tag

evilguru · 03-16-2005, 07:14 PM

Hello, sorry if I am bringing this topic back up from the dead again, however I have anouther problem with firefox. The script that I am working on is a news system, I have done the PHP and MySQL backend and I am currently working on the frontend. The idea is that news and titles are held in arrays, and then written to the document by javascript. Now, I am working on the editor, which currently just puts the contents into order (desc) and allows you to add more news items. It all works fine so far in good old ie, but plays up in firefox.

You can view the page here: http://www.dcrez.co.uk/create/news_ed.html and here is the source.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>News Editor</title>
		<script type="text/javascript">
		//Array data
			var news_title = new Array("JS Hates Me!", "PHP Rules");
			var news_body = new Array("Duh! We already knew that!", "PHP is the most used web scripting language!");
				function news() {
					for (var i = 0; i < news_title.length; i++) {
						var j = news_title.length - i; //Arrays start at 0, but for id's we want them decending, so -i
						var k = news_title.length - i - 1; //For displaying we need the reverse of the array but -1 as arrays start at 0
						document.write("News Id " + j + "\n<br />\n");
						document.write("<span id=\"" + k + "_news\">");
						document.write("<input type=\"text\" name=\"" + k + "_title\" value=\"" + news_title[k] + "\" />\n");
						document.write("<br />\n");
						document.write("<textarea rows=\"10\" cols=\"30\" name=\"" + k + "_body\">" + news_body[k] + "</textarea>\n");
						document.write("</span>");
						document.write("<br />\n");
					}
				}
				function news_error() {
					if (news_title.length > news_body.length) {
						document.write("Error: There are more titles than there are news items");
					}
					else {
						document.write("Error: There are more news items than there are titles");
					}
				}
				function add_news() {
					var j = news_title.length + 1;
					var i = news_title.length;
					var current = news_span.innerHTML;
					news_span.innerHTML =  "News Id " + j + "\n<br />\n";
					news_span.innerHTML += "<span id=\"" + i + "_news\">";
					news_span.innerHTML += "<input type=\"text\" name=\"" + i + "_title\" value=\"News Title Here!\" />\n";
					news_span.innerHTML += "<br />\n";
					news_span.innerHTML += "<textarea rows=\"10\" cols=\"30\" name=\"" + i + "_body\">News Body Here!</textarea>\n";
					news_span.innerHTML += "</span>";
					news_span.innerHTML += "<br />\n" + current;
					news_title[i] = "News Title Here!";
					news_body[i] = "News Body Here!";
				}
		</script>
	</head>
	<body>
	<input type="button" name="add_news" value="Add News Item" onclick="add_news();" />
		<div id="news_span">
			<script type="text/javascript">
			if (news_title.length == news_body.length) {
				news();
			}
			else {
			news_error();
			}
			</script>
		</div>
	</body>
</html>

In firefox the add another button does not work, now I know that I have used innerHTML (which seems to be a sin these days), however I am too dumb to know how to do it the w3c way

I was under the impression that most browsers supported innerHTML, if that is causing the problem.

Thanks for any help you can give.

hemebond · 03-16-2005, 08:02 PM

What happens if Javascript is disabled? Or you want to switch to XHTML?

_Aerospace_Eng_ · 03-16-2005, 08:16 PM

i believe it should be

Code:

document.getElementById('news_span').innerHTML

instead of

Code:

news_span.innerHTML

evilguru · 03-16-2005, 08:49 PM

Quote:

Originally Posted by hemebond

What happens if Javascript is disabled? Or you want to switch to XHTML?

If Javascript is disabled, well sadly the user is out of luck, however the number of people who have javascript turned off is less than 5%, we have pop-up blockers in browsers now, and most uses of javascript are constructive, however this is very different from how I normally use javascript, often I just use it for optional things.

The idea is that I will make this part of net2ftp (http://www.net2ftp.com) HTML template system, so that users who do not have PHP on their server are able to set up a content management system, with javascript playing the role of the database server (arrays) and of PHP (for statements). For those that dont know net2ftp is a web based ftp 'client' written in PHP. The idea is to use this system to create a new javascript file (.js) and then ftp it to the server, creating a basic content management system (articles and news) without the need for PHP.

Thanks for your help, it worked fine with getelementbyid method.

hemebond · 03-16-2005, 09:07 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>54410</title>
		<style type="text/css">
			label
			{
				float:left;
				width:5em;
			}
			input
			{
				vertical-align:middle;
			}
			textarea
			{
				vertical-align:bottom;
			}
		</style>
	</head>
	<body>
		<form id="news" name="news" action="54410" method="post">
			<fieldset>
				<input type="button" value="Add News Item" onclick="newsItems.addItem('','');">
			</fieldset>
		</form>

		<script type="text/javascript">
			var newsData = new Array();

			newsData[0] = new Array("JS Hates Me!", "PHP is the most used web scripting language!");
			newsData[1] = new Array("PHP Rules", "Duh! We already knew that!");

			function NewsItems(formElement)
			{
				var items = new Array();
				var form = document.getElementById(formElement);

				this.addItem = function (title, content)
				{
					var item = new NewsItem(title, content, items.length);
					form.appendChild(item.element);
					items[items.length] = item;
				}
			}

			function NewsItem(title, content, item)
			{
				function createLabel(text, element)
				{
					var label = document.createElement('label');

					label.setAttribute('for', element);
					label.appendChild( document.createTextNode(text) );

					return label;
				}

				function createTitleElement(text)
				{
					var titleElement = document.createElement('input');

					titleElement.setAttribute('id', 'title' + item);
					titleElement.setAttribute('name', 'title[]');
					titleElement.setAttribute('type', 'text');
					titleElement.setAttribute('value', text);

					return titleElement;
				}

				function createContentArea(text)
				{
					var contentArea = document.createElement('textarea');

					contentArea.setAttribute('id', 'content' + item);
					contentArea.setAttribute('name', 'content[]');
					contentArea.setAttribute('rows', '10');
					contentArea.setAttribute('cols', '30');
					contentArea.appendChild( document.createTextNode(text) );

					return contentArea;
				}

				function createInputItem(type, text)
				{
					var inputItem = document.createElement('div');
					var label = document.createElement('label');

					switch(type)
					{
						case 'title':
							label.setAttribute('for', 'title' + item);
							label.appendChild( document.createTextNode('Title') );
							inputItem.appendChild(label);
							inputItem.appendChild( createTitleElement(text) );
							break;

						case 'content':
							label.setAttribute('for', 'content' + item);
							label.appendChild( document.createTextNode('Content') );
							inputItem.appendChild(label);
							inputItem.appendChild( createContentArea(text) );
							break;
					}

					return inputItem;
				}

				function createNewsItem(title, content, item)
				{
					var legend = document.createElement('legend');
					legend.appendChild( document.createTextNode('News Item ' + item) );

					var newsItem = document.createElement('fieldset');
					newsItem.appendChild(legend);

					newsItem.appendChild( createInputItem('title', title) );
					newsItem.appendChild( createInputItem('content', content) );

					return newsItem;
				}

				this.element = createNewsItem(title, content, item);
			}


			var newsItems = new NewsItems('news');

			for(var i = 0; i < newsData.length; i++)
			{
				newsItems.addItem( newsData[i][0], newsData[i][1] );
			}
		</script>
	</body>
</html>

evilguru · 03-17-2005, 06:47 PM

That is brilliant, really does make my coding style seem outdated and naff. I am converted, I think I will finish the script off in its current form, then convert it to XHTML and DOM compiliant methods.