IE and mozilla javascipt differences

meghatronic · 21 Oct 2008 at 07:53

Is there any obvious reason I've overlooked as to why this won't work in mozilla/opera but fine in IE:

Code:

function updateMe(field){
	if(document.getElementById('field_' + field).value == ''){
	document.getElementById(field).innerHTML = field
	document.getElementById('field_' + field).value = field
	}else{
	document.getElementById(field).innerHTML = document.getElementById('field_' + field).value
	}
}

I know it's to do with "document.getElementById('field_' + field).value"

Similarly, the following doesn't work in mozilla/opera - and I think it's to do with .value:

Code:

function textSelect(field, type){
var textarea = document.getElementById(field);   		
// code for IE
if (navigator.appName=="Microsoft Internet Explorer"){
textarea.focus();
var sel = document.selection.createRange();                                                             
if(type == 'bold'){
	sel.text = '<b>' + sel.text + '</b>';			
}else if(type == 'italic'){
	sel.text = '<em>' + sel.text + '</em>';			
}else if(type == 'underline'){
	sel.text = '<u>' + sel.text + '</u>';			
}else if(type == 'link'){
	var title = prompt("Link title",sel.text);
	var url = prompt("Link URL","http://");
	sel.text = '<a href="' + url + '">' + title + '</a>';			
}
}else{  
// code for Mozilla
var len = textarea.value.length;   
var start = textarea.selectionStart;  
var end = textarea.selectionEnd;  
var sel = textarea.value.substring(start, end);   
if(type == 'bold'){
	var replace = '<b>' + sel + '</b>';			
}else if(type == 'italic'){
	var replace = '<em>' + sel + '</em>';			
}else if(type == 'underline'){
	var replace = '<u>' + sel + '</u>';			
}else if(type == 'link'){
	var title = prompt("Link title",sel);
	var url = prompt("Link URL","http://");
	var replace = '<a href="' + url + '">' + title + '</a>';			
}  
textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
}
}

Ladforce · 21 Oct 2008 at 10:09

ignore

SimonCHere · 21 Oct 2008 at 10:19

Seems to work fine in IE7 and Firefox 3, and Google chrome?

other than maybe missing off a couple of semi colons in the first one?

Code:

<html>
<head>
<script language='Javascript'>

function textSelect(field, type){
var textarea = document.getElementById(field);   		
// code for IE
if (navigator.appName=="Microsoft Internet Explorer"){
textarea.focus();
var sel = document.selection.createRange();                                                             
if(type == 'bold'){
	sel.text = '<b>' + sel.text + '</b>';			
}else if(type == 'italic'){
	sel.text = '<em>' + sel.text + '</em>';			
}else if(type == 'underline'){
	sel.text = '<u>' + sel.text + '</u>';			
}else if(type == 'link'){
	var title = prompt("Link title",sel.text);
	var url = prompt("Link URL","http://");
	sel.text = '<a href="' + url + '">' + title + '</a>';			
}
}else{  
// code for Mozilla
var len = textarea.value.length;   
var start = textarea.selectionStart;  
var end = textarea.selectionEnd;  
var sel = textarea.value.substring(start, end);   
if(type == 'bold'){
	var replace = '<b>' + sel + '</b>';			
}else if(type == 'italic'){
	var replace = '<em>' + sel + '</em>';			
}else if(type == 'underline'){
	var replace = '<u>' + sel + '</u>';			
}else if(type == 'link'){
	var title = prompt("Link title",sel);
	var url = prompt("Link URL","http://");
	var replace = '<a href="' + url + '">' + title + '</a>';			
}  
textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
}
}

function updateMe(field){
	if(document.getElementById('field_' + field).value == ''){
	document.getElementById(field).innerHTML = field;
	document.getElementById('field_' + field).value = field;
	}else{
	document.getElementById(field).innerHTML = document.getElementById('field_' + field).value
	}
}

</script>
</head>
<body>
<form>
<textarea id='bob' name='bob'></textarea><BR>
<input type='button' value='Bold Me' onclick='textSelect("bob","bold")'><BR><HR>
<input type='text' id='field_sjc' value='2' /><BR>
<input type='button' value='Update Me' onclick='updateMe("sjc")'>
</form>

<span id='sjc'>old</span>

</body>
</html>

Simon

probedb · 21 Oct 2008 at 10:59

Also you should really check to make sure you can use getElementById before actually using it.

meghatronic · 21 Oct 2008 at 12:00

probedb said:
Also you should really check to make sure you can use getElementById before actually using it.

Yeah - good point. I eventually will.

I can't figure out why this isn't working in opera/safari/mozilla though....

Ladforce · 21 Oct 2008 at 13:50

Works fine for me. What does your error console say in firefox? How are you calling updateMe?

ArmyofHarmony · 21 Oct 2008 at 13:50

meghatronic · 21 Oct 2008 at 14:26

Ladforce said:
Works fine for me. What does your error console say in firefox? How are you calling updateMe?

"Error: document.getElementById("field_" + field) has no properties"

or

"Error: textarea has no properties"

On the othe rone.

Ladforce · 21 Oct 2008 at 14:31

And your sure you have an element with that id in your html?

meghatronic · 21 Oct 2008 at 14:42

Ladforce said:
And your sure you have an element with that id in your html?

Yeah - and it works in IE

meghatronic · 21 Oct 2008 at 14:46

Turns out it was as you need both and id and a name tag.

Well that's a wasted day!

Cheers all.

Ladforce · 21 Oct 2008 at 14:47

You have to remember, IE bends all the rules and should never be used to test if something is working properly. In this instance, IE will accept a name as an id if the id is not present. Firefox will not and will give you an error.

With this in mind try document.getElementsByName('field_' + field)[0].value and see if firefox plays ball.