Reputation: 938
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
Reputation: 37700
It is simpler to use Element.update.
$('comment_2').update((money1 == 5) ? 'sss' : '');
Upvotes: 1
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