Lievcin
Lievcin

Reputation: 938

Js function running fine on Chrome, but not on Firefox

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!

Upvotes: 1

Views: 199

Answers (2)

clockworkgeek
clockworkgeek

Reputation: 37700

It is simpler to use Element.update.

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

Upvotes: 1

gblazex
gblazex

Reputation: 50109

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");

Upvotes: 3

Related Questions