Develop Reference

innerText vs textContent - getting some errors on Firefox [duplicate]

This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 7 years ago.
I'd getting some errors on my scripts here, in the first one I've declared a var text(); type to create a box with some text content.
var x=$('#x').text();
In my second .js I'm doing some handling on this var that ensure my text i'll have less char than max-length, here is:
var limitMaxLength = function(element) {
var maxLength = $(element).data("max-length");
if (maxLength) {
$(element).on("keypress", function(event){
if (event.target.innerText.length > maxLength || event.keyCode === 13) {
event.preventDefault();
}
});
}
};
So I having some issues on Firefox getting this error:
[TypeError: event.target.innerText is undefined]
In IE, Opera, Chrome and Safari my code works fine, i'm getting error only on Firefox.
*Sorry for my bad english.

innerText was a Microsoft Creation, left over from the days of old. Firefox decided not to support it in favour of the w3 compliant, textContent. However, IE8 & below do not support textContent, therefore, if you wish to support Legacy browsers, you're in a bit of a bind.
var text = elem.textContent || elem.innerText;
or
elem.innerHTML // eww, but it works, eh?
or, just ditch IE8 (easier said than done, especially at work)

innerText is not supported in FF.
You can fix the issue by using dynamic property names. At first, check which property is supported:
var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
Define textContent as a global variable (or within the outmost scope), then you can use it like this:
var someText = elem[textContent];
This snippet gives you textContent if it's available, innerText otherwise. Notice also, that there's a small difference between these two properties.
A live demo at jsFiddle.
Though when you're using jQuery, why not just:
$(event.target).text()

Javascript SetInverval() fireing only once in Firefox [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
setInterval not working (firing only once) in Google Chrome extension
This error only is a problem when document.write() is used.
I am on Mac 10.6.8 Intel.
Here is my script:
setInterval(function(){myFun()},1000);
function myFun() {
document.write('something');
}
The behavior is different in various browsers:
Firefox 12: Only happens once. The browser says "connecting" in the status bar.
Google Chrome and safari: Seems to work correctly.
Note: using setTimeout instead causes everything to behave like firefox (not working).
Using setInterval(myFun},1000), which is supposedly the source of so much error, behaves identically.

Many beginning tutorials use document.write() for "hellow world". However, this funciton is dangerous because it may mess up the script (by nuking the entire program). Here is a safe way to do debug printouts:
Before the script, in between the and in the html, add this:
<div id="myDebug"></div>
In the script, first convert it to a variable that can be called upon:
var myDebug = document.getElementById("myDebug");
When you need to show something, do this:
debug.innerHTML = "some string";
This will show the string in the browser window.

try this:
setInterval(function(){myFun()},1000);
function myFun() {
// Return all elements in document of type 'body'
// (there will only be one)
var bodyArray = document.getElementsByTagName('body');
// get the body element out of the array
var body = bodyArray[0];
// save the old html of the body element
var oldhtml=body.innerHTML;
// add something to the end
body.innerHTML=oldhtml+"somrthing";
}
As others have mentioned, using document.write() will (in some browsers) nuke the script used to update the document, writing to the body (and not the head, where the javascript should be stored) will stop this from happing.

Seems that you miss the semicolon after myFun()
setInterval(function(){myFun();},1000);
function myFun() {
document.write('something');
}
Also make sure you put the function in <body></body>

document.open() results in clearing the document. This function gets called by Firefox before document.write(). Thus your interval is lost.
see W3C Document Object Model HTML

Javascript with Firefox innerText issue [duplicate]

This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 7 years ago.
function OpenWindow(anchor) {
var toUsername = anchor.innerText;
window.open("ChatWindow.aspx?username=" + toUsername,'_blank', "width=340,height=200");
}
this function opens up a page with parameter as undefined in firefox where as in google chrome I get proper value.
Firefox url:
http://localhost:9452/ChatWindow.aspx?username=undefined
What is the solution for this issue?

While innerText is non-standard, it significantly differs from textContent, because first one is doing pretty printing (for example, <br/> are converted to new lines), while second one - is not.
So, while common wisdom is to use:
var toUsername = anchor.innerText || anchor.textContent;
or some kind of wrapper, it can probably be smarter to just use jQuery's .text or its analog from other library you are using.

try to change anchor.innerText with:
anchor.textContent
this hopefully works in all browsers.
also see here: 'innerText' works in IE, but not in Firefox
P.S. I really reccomend using JQuery to avoid these kind of issues and to be sure to always write fully cross-browser javascript.

innerText is a Microsoft invention whereas textContent is a W3C standard.
function OpenWindow(anchor) {
var toUsername = anchor.textContent || anchor.innerText || '';
window.open("ChatWindow.aspx?username=" + toUsername,'_blank', "width=340,height=200");
}
This should work. MooTools or some other JavaScript framework should be able to help with cross-browser inconsistencies.

use textContent for innerText.
example
<script>
function change()
{
document.getElementById("label").textContent="Hello";
}
</script>
it will work on ff. and chrome too. but not work on IE.

I was getting the same problem because Firefox does not support the innerText property, instead, it supports the textContent property. so check for the browser’s feature support to use the correct property accordingly.
if(document.all){
document.getElementById('element').innerText = "myText";
} else{
document.getElementById('element').textContent = "myText";
}
or it's better to use Jquery to resolve cross browser issues.
Usage:
$('element').text("myText");

IE Object doesn't support this property or method

This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com

In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.

Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.

Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.

IE won't split string with Javascript

I have the following code:
$('#smallcart .plusone').live('click',function(){
var id = $(this).attr('id');
articlenr = id.split('_')[1];
});
this works fine in FF, safari, Chrome, however in IE (7 and 8) it throws an error on the split-function (this property or method is not supported by this object).
if I alert the 'id'-variable I get something like plus_5751. (so I want to get the '5751' part)
if I do alert(typeof(id)) I get String as an answer...
Maybe somebody can point me to the right answer?
Thx

The split works pretty well in IE. The problem is the part left of the equal-sign. It's an object with all input-fields having the name articlenr and therefor IE quits with 'this property or method is not supported by this object' when you're trying to assign a string to it.

Your code works just fine for me in Internet Explorer - as it should be expected to. The problem must lie elsewhere, perhaps something is overriding String.prototype.split?. You can see a working example of your code at http://jsfiddle.net/AndyE/6K77Y/. The first thing to check for is any Internet Explorer specific code in your scripts.
I would make one small improvement for efficiency. $(this).attr('id'); is pretty much the long winded way of writing this.id. It's slower, because a new jQuery object has to be created and then the attr function has to run. Without it, your code can be compressed more, whilst still remaining very readable, if you like:
$('#smallcart .plusone').live('click',function(){
articlenr = this.id.split('_')[1];
});

Try renaming your variable 'id' to something else. IE doesn't like it when you name things in your scripts the same as items in the DOM.
Never mind, that seems to have not been the issue in this case. I have, however, had issues in the past with IE specific bugs caused by variable names.