Javascript doesn't work without firebug

[oaishm]

Does firebug do something special to force scripts to run? I found this script that unfortunately uses the document.write method. It doesn't run unless I have firebug console enabled. Then it runs fine.

<script type='text/javascript'>

var spoilernum = 1;
var fbuttons = new Array(); //This is for the buttons we will offer
var fimagepath;

function seturl(url){
	fimagepath=url;
	}

function fbutton(innercontent, image, alt){
	this.innercontent = innercontent; //this is the tag type
	this.image = image; //button image
	this.alt = alt; // the alt name for the image of the button
	}
	
fbuttons.push(
	new fbutton(
		'url'
		,'link.png'
		,'Forum url'
	)
);

fbuttons.push(
	new fbutton(
		'b'
		,'bold.png'
		,'Forum bold text button'
	)
);

fbuttons.push(
	new fbutton(
		'i'
		,'italics.png'
		,'Forum italics text button'
	)
);

fbuttons.push(
	new fbutton(
		'image'
		,'image.png'
		,'Forum image button'
	)
);


function makebuttons() {
	
	var i = 0;
	document.write('<div id="toolbar">');
	for (i = 0; i < 4; i++) {
		//console.log('loop number'+i);
		//console.log(fimagepath+fbuttons[i].image);
		console.log(i);
		console.log('<a onclick="askBox(\''+fbuttons[i].innercontent+'\');" href="javascript: markup()"><img class="fbuttons" border="0" src="'+fimagepath+fbuttons[i].image+'" alt="'+fbuttons[i].alt+'"/></a>');
		document.write('<a onclick="askBox(\''+fbuttons[i].innercontent+'\');" href="javascript: markup()"><img class="fbuttons" border="0" src="'+fimagepath+'templates/sbsru/images/'+fbuttons[i].image+'" alt="'+fbuttons[i].alt+'"/></a>');
	}
	document.write('</div>');
}

function countSpoiler() {
	var spoilernum = spoilernum + 1;
}

function storeCaret(position) {
	if (position.createTextRange){
		position.caretPos = document.selection.createRange().duplicate();
	}
}

function insertColor(Color) {
	surroundText("[color:" + Color + "]" , "[/color]", document.post.body);
	document.post.body.focus();
	return;
}   

function askBox(what) {
	if (what == "url") {
		var ModText = prompt("Enter URL:", "http://");
		if (ModText != null && ModText != '' && ModText != 'http://'){
			var LinkText = prompt("Text For Link:","Link");
			if (LinkText != null && LinkText != ''){ 
				insertCode(document.post.body, ' ' + LinkText + ' ');
			}
		}
		return;
	} 
	else if (what == "spoiler") {
		var SpoilerQ = prompt("Spoiler Question " + spoilernum + ":","");
		if (SpoilerQ != null && SpoilerQ != '') {
			var SpoilerA = prompt("Spoiler Answer " + spoilernum + ":","");
			if (SpoilerA != null && SpoilerA != '') {
				insertCode(document.post.body, ' [spoilerq:' + spoilernum + ']' + SpoilerQ + '[/spoilerq] \n'
				+ ' [spoilera:' + spoilernum + ']' + SpoilerA + '[/spoilera] ');
				countSpoiler();
			}
		}	
	}
	else if (what == "image") {
		var ModText = prompt("Enter URL to Image:", "http://");
		if (ModText == null){
			return;
		}
		insertCode(document.post.body, ' [image]' + ModText + '[/image] ');
	}
	else if (what == "color") {
		var ModText = prompt("Enter Color Code:", "#");
		if (ModText == null) {
			return;
		}
		insertColor(ModText);
	}
	else if (what == "list") {
		var ModText = "init";
		var listoutput = "
\n";
		while ( (ModText != null) && (ModText != "") ) {
			ModText = prompt("Enter List Item (leave blank to end list).","");
			if ( (ModText != null) && (ModText != "") ) {
				listoutput = listoutput + "[li]" + ModText + "[/li]";		
			}
		}
		listoutput = listoutput + "
\n ";
		insertCode(document.post.body, listoutput);
	}
	else {
		surroundText('['+ what + ']' , '[/'+ what + ']', document.post.body);
	}
	document.post.body.focus();
	return;
}	
function markup() {
	return;
}	

function surroundText(text1, text2, textarea)
{
	//M$ IE browsers
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos;
		// remove white space at the start and end of selection
		selection = caretPos.text;
		var spacebefore = 0;
		var spaceafter = 0;
		while (selection.substring(0,1) == ' ') {
			selection = selection.substring(1);
			spacebefore = spacebefore + 1;
		}
		while (selection.substring(selection.length-1,selection.length) == ' '){
			selection = selection.substring(0,selection.length-1);
			spaceafter = spaceafter + 1;
		}

        if(spacebefore > 0 ) {
			movedStart = caretPos.moveStart("character", +spacebefore);
		}
		if(spaceafter > 0 ) {
			movedEnd = caretPos.moveEnd ("character", -spaceafter);
		}

		textlength = caretPos.text.length;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' '
			? text1 + caretPos.text + text2 + ' '
			: text1 + caretPos.text + text2;

		if (textlength==0){
            n = text2.length;
            caretPos.moveStart("character", -n);
            caretPos.moveEnd ("character", -n);
        }
		if (textlength > 0){
			n = text1.length + text2.length + textlength;
			caretPos.moveStart("character", -n);
		}
		caretPos.select();
	}
	//Mozilla browsers
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var start =   textarea.selectionStart;
		var finish =  textarea.selectionEnd;
		var begin =     textarea.value.substr(0, start);
		var selection = textarea.value.substr(start, finish - start);
		var end = textarea.value.substr(finish);
		var newCursorPos = start;
		var scrollPos = textarea.scrollTop;

		//  remove white space at the beginning and end of selection
		var spacebefore = 0;
		var spaceafter = 0;
		while (selection.substring(0,1) == ' ') {
			selection = selection.substring(1);
			spacebefore = spacebefore + 1;
		}
		while (selection.substring(selection.length-1,selection.length) == ' '){
			selection = selection.substring(0,selection.length-1);
			spaceafter = spaceafter + 1;
		}

    	if(spaceafter > 0  || spacebefore > 0 ) {
		  	start = start + spacebefore;
		  	finish = finish - spaceafter ;
			var begin = textarea.value.substr(0, start);
			var selection = textarea.value.substr(start, finish - start);
			var end = textarea.value.substr(finish);
			var newCursorPos = start;
			var scrollPos = textarea.scrollTop;
        }

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange){
			if (selection.length == 0){
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			}else{
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
				textarea.focus();
			}
			textarea.scrollTop = scrollPos;
		}
    }else{ // other browsers
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
 	}

}

function insertCode(TextPosition, text) {
	if (TextPosition.createTextRange && TextPosition.caretPos) {
	//M$ IE browsers
		var caretPos = TextPosition.caretPos;
		caretPos.text =
			caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
			text + ' ' : text;
			document.post.body.focus();
			return;
	}
	//Mozilla browsers
	else if (typeof(TextPosition.selectionStart) != "undefined")
	{
		var begin = TextPosition.value.substr(0, TextPosition.selectionStart);
		var end = TextPosition.value.substr(TextPosition.selectionEnd);
		var scrollPos = TextPosition.scrollTop;

		TextPosition.value = begin + text + end;

		if (TextPosition.setSelectionRange)
		{
			TextPosition.focus();
			TextPosition.setSelectionRange(begin.length + text.length, begin.length + text.length);
		}
		TextPosition.scrollTop = scrollPos;
	}

	// other browsers
	else{
			TextPosition.value += text;
			TextPosition.focus(TextPosition.value.length - 1);
	}
	return true;
}


</script>

<center>
<form name="post" method="post" action="<?=$this->full_url?>">
<table border="0">
	<tr>
		<td valign="top">Message:</td>
		<td>

			<script type="text/javascript">seturl('<?=$this->current_url?>');</script>
			<script type="text/javascript">makebuttons();</script>
			<textarea name="content" id="body" class="textbox" onchange="storeCaret(this);" onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" rows="10" cols="40"><?=$this->content?></textarea>
			
			<p><input type="submit" value="<?=$this->submit?>" /></p>

		</td>
	</tr>
</table>
</form>
</center>

[opifex]

Do you have a live test version (link) or the actual html ? The php short tags contain variables that are missing in what you are showing us... that could be part of the problem that we can't see.

Putting line breaks in the middle of code lines is a really bad idea and can cause problems, also you need to take care in what you choose to use for non-ascii symbols - I prefer unicode.

var listoutput et al should be something like this...

var listoutput = "\u00B7 \n";
while ( (ModText != null) && (ModText != "") ) {
      ModText = prompt("Enter List Item (leave blank to end list).","");
      if ( (ModText != null) && (ModText != "") ) {
      listoutput = listoutput + "[li]" + ModText + "[/li]";
      }
      }
listoutput = listoutput + "\n ";

Have you turned on the error console in your browser? It might give you a clue.

[Specht08]

you can't use console.log(); without firebug, comment those lines and try it again.

[opifex]

@Specht08
Nice catch! Would seem that OP copied the source code with Firebug open!

Take out "console.log", do the corrections and it works as much as it can with out the unknown variables.

[oaishm]

I have to tell you that's amazing. I can understand php failing when you put in extraneous functions, but I guess I just thought Javascript would ignore unknown variables the way css would. I don't know why I thought that since it's retarded, but I did. Thanks so much, that's exactly what was wrong. This isn't as bad as when I misspelled javascript and debugged for hours, but its close.