Js function running fine on Chrome, but not on Firefox

Question

I'm trying to make some of the components in my list interactive, as there're many comments and settings depending on the user's input on the form.

The product is made out of several components, each one with their own properties, however, the product validation relies on some of the components values chosen.

I have the following js function which gets called from my view:

function change_people() {
  money1 = $('money_1').children[0].value;
  if (money1 == 5) {
      $('comment_2').innerText = "sss";
      //$('comment_2').hide();
  } 
  else {
      $('comment_2').innerText = "";
      //$('comment_2').show();
  }
}

document.observe('dom:loaded', function() {
  change_people();
  $('money_1').children[0].observe('change', change_people);
});

When I run the code in chrome, it works fine, with each selection it will update the next comment, however, in firefox is completely unresponsive!

Anyone got ideas of the reasons for this?

(oh and is using prototype library)

Thanks!

score 3 · Accepted Answer · edited May 23 '17 at 12:11

3

innerText is the Microsoft version of the standard textContent. Chrome supports both, but Firefox only the standard one. There are two things you can do:

1. Dummy test (executed only once) keep in mind the gotchas

var textContent = (function() { 
  var dummy = document.createElement("span");
  dummy.innerHTML = "full <span>support</span>";
  if (dummy.textContent === "full support") {
     return "textContent";
  } else {
     return "innerText";
  }
})();

usage

el[textContent] = "text";

2. Use DOM methods

function setText(el, text) {
    while (el.firstChild) {
        el.removeChild(el.firstChild);
    }
    el.appendChild(document.createTextNode(text));
}

usage

setText(el, "text");

edited May 23 '17 at 12:11

Community

1
1

answered Jan 23 '11 at 13:37

gblazex

49,155
12
98
91

Worked perfectly! You're a star! – Lievcin Jan 23 '11 at 13:39
I've also added feature detection, in case you wanna support IE. – gblazex Jan 23 '11 at 13:41
Note that `innerText` and `textContent` are *not quite* the same thing, there are real gotchas in there: http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox/1359822#1359822 – T.J. Crowder Jan 23 '11 at 13:43
Thanks! yes, will need IE as well. – Lievcin Jan 23 '11 at 13:44
@TJ - Yep I was about to add that link. – gblazex Jan 23 '11 at 13:47
@Lievcin: For *getting* the text content, you might find this thread (and the associated code) useful: http://groups.google.com/group/prototype-scriptaculous/tree/browse_frm/month/2010-04/2ba484c64057a926 – T.J. Crowder Jan 23 '11 at 13:52

score 1 · Answer 2 · answered Jan 23 '11 at 14:21

1

It is simpler to use Element.update.

$('comment_2').update((money1 == 5) ? 'sss' : '');

answered Jan 23 '11 at 14:21

clockworkgeek

37,650
9
89
127

Js function running fine on Chrome, but not on Firefox

2 Answers2