Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Sean T. Unwin
28,690 PointsInteractive Web Pages with JavaScript Course: Tip for making it more cross-browser compatible
The use of innerText is not compatible with Firefox.
I would suggest that in instances where this is used in the videos to use textContent. This would allow for more cross-browser compatibility, at least for modern browsers.
For Internet Explorer versions 8 and below, you could use firstChild.nodeValue. This works in all browsers. Some may say that dealing directly with nodes can be confusing to some, although in this instance I don't think that is the case.
View an example on Codepen based on a question from this forum.
Any thoughts are appreciated, especially if Andrew Chalkley would have any input on this regarding the course.
Sean T. Unwin
28,690 PointsThanks for your comment, Iain, and also thanks for the link. Good stuff.
I understand what you're saying and it is a really good option, although, I think it is in a little bit of a different direction than what I was trying to convey. My primary concern is for people using Firefox, as opposed to Chrome, as their primary browser. I don't think anyone here would be using anything less than IE9. I realize that I mentioned IE in my post, but that was more of an aside with a justification for using the fallback option of firstChild.nodeValue if needed, which it probably wouldn't be in terms of the courses and workshops here. I was simply stating that using that is available in practically any browser regardless of how old they may be since it's been a spec for ages and likely will be going forward.
The issue I was trying to raise, and to assist others with, is that innerText is not an implemented standard - it was spawned by the MSIE team and some browsers included it because of market share, I suppose, although I am speculating on that.
Therefore, the main point I am attempting to achieve is to raise awareness to those that use Firefox, as it does have a significant user-base and their team is trying to follow standards laid out by the W3C and whatwg, so they may be wondering why some aspects of their JavaScript may not perform as intended or perhaps get errors they do not understand. Now, of course, I am in no way intending to besmirch Andrew - he's awesome and so are his courses. :)
1 Answer
Matteo Mainardi
7,372 Pointshi Sean T. Unwin, i think that using firstChild.nodeValue could be troublesome if you make changes to the html code like adding children tags before text, forcing you to make a lot editing. using the property it's probably safer, but I've zero experience, so it's just a thought.
in this case, to assure compatibility with <=IE8, you could do something like:
var editText = function(element_to_edit, text) {
if (Node.innerText) {
element_to_edit.innerText= text;}
else {
element_to_edit.textContent= text;}
}
var getElemText = function(element) {
if (Node.innerText) {
return element.innerText ;}
else {
return element.textContent ;}
}
editText(editButton,"Edit");
editInput.value = getElemText(label);
Sean T. Unwin
28,690 PointsHi Matteo Mainardi,
Thanks for commenting; I apprectiate your input.
In regards to using firstChild, if we are simply replacing all text this shouldn't be an issue. If we are being more particular then I could see that possibly being an issue although I would tend to view that as a use-case outside the scope of the subject of simple text replacement here.
Furthermore, firstChild.nodeValue essentially does the same thing as innerText so if we were wanting to replace text further down the chain, such as firstChild.firstChild, then innerText will not necessarily work in that regard either.
Suposing there were multiple children we could cycle through them with a loop using the childNodes array or target them specifically, e.g. elem.childNodes[1].nodeValue, for example.
As with almost anything in programming there is more than one way to write code to accomplish the same task and with that in mind I am glad you posted another example. I believe both our examples gets the same result in <=IE8, but as I understand it innerText is slower than nodeValue with IE6/7, but I am not absolute in that regard.
Cheers. :)
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsSince innerText works on IE8, and just about everything else supports textContent, I guess you could add it to the element prototype where it doesn't exist: http://stackoverflow.com/a/18063663
They're technically not directly interchangeable and have some slight differences, but no more than you would need to deal with trying to juggle separate functions/methods for each browser every time you want to use them...