1

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.

Isxida
  • 55
  • 2
  • 8
  • 1
    Works for me: http://jsfiddle.net/2SxYS/. Please provide more information/context. – Felix Kling Dec 09 '13 at 16:01
  • @MelanciaUK He's using `.getElementsByClassName()`. So that should work. – Zero Fiber Dec 09 '13 at 16:02
  • 3
    possible duplicate of ['innerText' works in IE, but not in Firefox](http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox) – Jamiec Dec 09 '13 at 16:02
  • As of [canIuse](http://caniuse.com/#search=getElementsByClassName) it should work on firefox from Ver. 24.0. – fast Dec 09 '13 at 16:03
  • @Jamiec: Might be that this is an additional problem, but it does not explain the error. – Felix Kling Dec 09 '13 at 16:04
  • @FelixKling - comment out the `window.print` and the following line which sets it back - the text is not changing because `innerText` is not supported by FF – Jamiec Dec 09 '13 at 16:04
  • @Jamiec: `innerText` works fine in FF 26 at least. And as I said, it might be an *additional* problem, but `.innerText` won't cause the error `TypeError: document.getElementsByClassName(...)[0] is undefined`. – Felix Kling Dec 09 '13 at 16:05
  • @FelixKling: That's a new feature for FF 26. FF 25 and earlier doesn't have it. – Blue Skies Dec 09 '13 at 16:06
  • 1
    If there are no elements with that class name, then the `[0]` reference will be `undefined`. I suspect that `getElementsByClassName` is returning a perfectly good, but **empty**, node list. – Pointy Dec 09 '13 at 16:06
  • @BlueSkies: I know that it's not supported in FF. And it turns out that it isn't supported in FF26 either. My first test seemed to indicate that it doesn't but I cannot reproduce it anymore, so... :) – Felix Kling Dec 09 '13 at 16:17
  • @FelixKling: And here you had my hopes up that we had another step toward browser compatibility. Darn you Felix Kling! ;-D – Blue Skies Dec 09 '13 at 16:19
  • Well, in my FF 25.0.1 document.getElementsByClassName(..) works just fine. @lsxida what version of FF do you test on? – fast Dec 09 '13 at 16:19
  • @fast - I think you've missed the point of this conversation - nobody denies `document.getElementsByClassName` works in all FF's - its `innerText` which doesn't! – Jamiec Dec 09 '13 at 16:21
  • guys i added some extra info. Maybe its because the iframes, i should declare on the document something? – Isxida Dec 09 '13 at 16:22
  • @Jamiec: reg. the conversation you're right, sure ;-) – fast Dec 09 '13 at 16:23
  • DOM methods, such as `getElementsByClassName`, certainly don't take iframes into account. But it shouldn't work in Chrome either. If you are looking for elements in a specific iframe, you have to get the document object of that iframe first. – Felix Kling Dec 09 '13 at 16:27
  • Thanks guys, I wouldnt make it without help. You're awesome :D – Isxida Dec 09 '13 at 17:55

3 Answers3

3

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.

Community
  • 1
  • 1
Jamiec
  • 133,658
  • 13
  • 134
  • 193
1

You probably should use:

 iframe.contentDocument.getElementsByClassName(...)

(see: contentDocument for an iframe)

Community
  • 1
  • 1
fast
  • 885
  • 7
  • 15
-2

Basically .innerText will not work in FF. FF uses textContent property.

var text = element.textContent;
element.textContent = "this is some sample text";
Irfan TahirKheli
  • 3,652
  • 1
  • 22
  • 36
  • 1
    How does this explain the error? `TypeError: document.getElementsByClassName(...)[0] is undefined`? – Felix Kling Dec 09 '13 at 16:05
  • 2
    Really? If I change it back to `.innerText`, all I see in the alert `undefined`, but not the error the OP mentions. http://jsfiddle.net/PDf66/1/. `.innerText` is not the reason of the error! – Felix Kling Dec 09 '13 at 16:14
  • Ok so tell me what error OP mentioned. You have downvoted my answer? – Irfan TahirKheli Dec 09 '13 at 16:17
  • 1
    If you read the question carefully you will see *"But in firefox throws `[10:48:48.330] TypeError: document.getElementsByClassName(...)[0] is undefined`"*. Don't get me wrong, using `.innerText` is incorrect, but it is not responsible for the error and therefore your answer doesn't solve the overall problem. – Felix Kling Dec 09 '13 at 16:18
  • And what do you see on the alert? – Irfan TahirKheli Dec 09 '13 at 16:19
  • 2
    That I see `undefined` in the alert has nothing to do with `TypeError: document.getElementsByClassName(...)[0] is undefined`. Here is an example of what would happen if the `TypeError` occurred: http://jsfiddle.net/PDf66/2/. As you can see, the `alert` is not even executed. – Felix Kling Dec 09 '13 at 16:20
  • A 10 years child would know that the only reason for document.getElementsByClassName(...)[0] is undefined is that there is no element with this class. Now the iframe things is included in the question. Great .. and thank you. – Irfan TahirKheli Dec 09 '13 at 16:24