We Keep Coding

getElementsByClassName not working on firefox

I was trying to print a anual report but i need to change 2 texts around the page, one of them has only a class attribute. Im new at js so i made this.
<div id="formBusqPresElec:dtResBSPE_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header">
<span class="ui-paginator-current">Mostrando 1-20 de 1626 registros</span>
</div>
And the other has an id.
<div id="fBusqSPE">Mostrando 20 de 1626 registros</div>
I made it work on Chrome
function imprimir() {
var oldText = document.getElementById('fBusqSPE').innerText;
document.getElementById('fBusqSPE').innerText = document.getElementsByClassName('ui-paginator-current')[0].innerText;
window.print();
document.getElementById('fBusqSPE').innerText = oldText;
}
But in firefox throws
[10:48:48.330] TypeError: document.getElementsByClassName(...)[0] is
undefined
Edit: So let me explain more.
Actually im working inside 2 iframes, which the first one is for the menu, and the other one is for more options. Then the central iframe is used to show the actual report.
Maybe I must define which iframe I want to retrieve those elements.

There are 2 problems here. The first causes your error of document.getElementsByClassName(...)[0] is undefined and once overcome, the second is that Firefox does not support innerText
The only way to generate the specified error in Firefox is for no elements with the specified class being present on the page. This is demonstrated by the following code
<div class="a-test"></div>
// on page load
document.getElementsByClassName("b-test")[0].innerHTML="Test";
JSFiddle:http://jsfiddle.net/UL2Xs/
If you watch the console when running the above fiddle, you'll see the same error as you get.
Is it possible that your javascript is running before the page has finished loading?
The second, and more minor issue is that FireFox does not support innerText. You should use .textContent or possibly .innerHTML.

You probably should use:
iframe.contentDocument.getElementsByClassName(...)
(see: contentDocument for an iframe)

Basically .innerText will not work in FF. FF uses textContent property.
var text = element.textContent;
element.textContent = "this is some sample text";

javascript: get contents of textarea, textContent vs. innerHTML vs. innerText

I am having trouble getting the contents of a textarea with js. I feel like I've done this many times before without problems but something is throwing it off or I have a mental block.
html
<textarea id="productdescript">test copy..asdfd</textarea><button value="Enter" onclick="addProduct()">
js
function addProduct() {
var descript = document.getElementById('productdescript').textContent;
alert(descript);
}
Firefox is the only browser I have currently.
When I use textContent, the alert box appears but it is blank.
When I use value, the alert box appears and says "Undefined"
When I use innerHTML, all the HTML appears including the tags.
Also, I understand that textContent only runs in FF and for cross browser compatibility you need to do something like innerText and textContent but textContent is not working in FF. There is no jquery on this app
What is the correct cross browser way to get contents of textarea! Thanks for any suggestions.

For textarea, you could only use .value in your scenario (I tested your given code and it works fine).
.
Also,
1) keep in mind that you call this function addProduct() ONLY after your element is mentioned in the code, otherwise it will be undefined.
2) there must not be another element with id as productdescript
3) there must not be a JS variable called productdescript

This are your code?
you write document.getElementByID.... and the "D" should be written lowercase "d"
document.getElementById('productdescript').textContent;

jQuery - Trouble adding a class to a hyperlink using 'each'

I have some Javascript that finds all of the hyperlinks in a page that contain 'google' for example and changes the beginning of the url to another url.
I am trying to add a class to this affected link, however I am getting a lot of 'undefined' errors in the JS console. I have tried alert($(this).innerHTML)) which showed the contents of the hyperlink - clases and whatnot. But for some reason I cannot append a class. I have also tried using this.className += " socks". That also causes an undefined error. I think I am missing something simple!
Also is there a way of using a regex in the search, I am newish to Javascript.
Here is my code:
$("a[href*='google']").each(function(){
this.href = this.href.replace('http://www.google.co.uk','http://www.ask.com');
this.href = this.href.replace('http://www.google.com','http://www.ask.com');
$(this).addClass("socks");
});
Thanks very much for any help!

There is no error with this code that i can see:
http://jsfiddle.net/p7Sgj/
See this.

try
$("a[href*='google']").each(function(){
var href = $(this).attr('href');
href.replace('http://www.google.co.uk','http://www.ask.com');
href.replace('http://www.google.com','http://www.ask.com');
$(this).attr('href', href);
$(this).addClass("socks");
});
instead of using this.href. I guess your code doesn't reach the addClass part...
Also, use firebug (in case of firefox) or chrome developer tools (in case of chrome) for debugging. You can simply set a breakpoint, add watches, etc...
(In that case, make sure you use a so-called non-minified version of jQuery for easier debugging)

If your HTML code is
Hello
World
And your CSS is
.socks {
color:#f00;
}
Then your code should be working fine.
http://jsfiddle.net/k93TZ/2/
Working here.
It might be your html or css code.

Changing content using innerHTML with a non-standard element in Internet Explorer

I have the non-standard element
<testele></testele>
In every browser except IE, this bit of JavaScript will successfully change the content of the above element
document.getElementsByTagName("testele")[0].innerHTML = 'hi';
However, if I change the <testele> to just a <span> (in the HTML and the JavaScript), it now successfully changes the content of the element in every browser, including IE.
Is there any fix? I have searched around and tried a bunch to no avail.

Use document.createElement("testele") before it is rendered. This script must be included before the document encouters a <testele>:
http://jsfiddle.net/gilly3/LjwbA/
document.createElement("testele");
window.onload = function() {
document.getElementsByTagName("testele")[0].innerHTML = 'hi';
};
If you try to do document.createElement("testele") after a <testele> has been parsed by the browser, it's too late.

Take a look at innerShiv, a Javascript plugin which aims to solve this.

If innerHTML is evil, then what's a better way change the text of a link?

I know innerHTML is supposedly evil, but I think it's the simplest way to change link text. For example:
<a id="mylink" href="">click me</a>
In JS you can change the text with:
document.getElementById("mylink").innerHTML = new_text;
And in Prototype/jQuery:
$("mylink").innerHTML = new_text;
works fine. Otherwise you have to replace all of the child nodes first and then add a text node. Why bother?

How about
document.getElementById('mylink').firstChild.nodeValue = new_text;
This won't suffer from the problems described by PEZ.
Regarding Triptych's comment and bobince's reply, here's another solution:
var oldLink = document.getElementById('mylink'),
newLink = oldLink.cloneNode(false);
newLink.appendChild(document.createTextNode(new_text));
oldLink.parentNode.replaceChild(newLink, oldLink);

innerHTML is not evil at all. There's nothing wrong with using it, as long as you're aware of the consequences.

For browsers supporting DOM3 you can use textContent:
document.getElementById("mylink").textContent = new_text;
This works in FF(tested in 3), Opera (tested in 9.6) and Chrome (tested in 1) but not in MSIE7 (haven't tested in MSIE8)
Added example
It's not pretty but should work cross browser (tested in win in FF3, Opera9.6, Crome1 and MSIE7)
function replaceTextContent(element,text) {
if (typeof element ==="string") element = document.getElementById(element);
if (!element||element.nodeType!==1) return;
if ("textContent" in element) {
element.textContent = text; //Standard, DOM3
} else if ("innerText" in element) {
element.innerText = text; //Proprietary, Micosoft
} else {
//Older standard, even supported by Microsoft
while (element.childNodes.length) element.removeChild(element.lastChild);
element.appendChild(document.createTextNode(text));
}
}
(updated: added support for Microsofts proprietary innerText)

innerHTML has side effects (like disconnecting existing DOM nodes and rerendering that might be heavy). One needs to be aware of these effects. And anyone maintaining the code will need to be alert to that innerHTML is used or they might run into strange bugs.

Up until a year ago, innerHTML was just a lot faster than manipulating events via the DOM. I haven't checked the latest versions of all major browsers for this myself.
Firefox for example doesn't handle this well. It sometimes only updates the screen to reflect the change. If you query the DOM after the change, it still has the old values.
Example: try to change the value of a textarea via innerHTML, and then post the form. It'll silently post the value that the textarea had before. Think of the catastrophic results that something like that could have.

Maybe it's just some standard addicts who reject the idea of innerHTML.
innerHTML is the practical standard because all browsers implement it though it's not a W3C standard.
Just use it. It works like a charm.

Another option is to have two divs and use .hide() & .show().