We Keep Coding

Why is .innerText not working in Firefox? [duplicate]

This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 7 years ago.
Here is my code
It's working perfect in all browsers but not in Firefox.
I tried many thing but didn't work at all.
Please can some one help me on this issue.
Am I doing something wrong.?
Is there any other way.?
I'M USING .innerText because values are coming from
<span class="jr-rating-wrapper-jr_stars-new-0">
4.5
</span>
There is no error on console.
<script type="text/javascript">
jQuery('#submitButton').click(function(){
var PostStartone = document.getElementById('jr-rating-wrapper-jr_stars-new-0').innerText;
var PostStarSec = document.getElementById('jr-rating-wrapper-jr_stars-new-1').innerText;
var PostStarThird = document.getElementById('jr-rating-wrapper-jr_stars-new-2').innerText;
var PostCapVal = document.getElementById('code').value;
var PostRBVal = "";
var selected = jQuery("div.jr_fieldDiv input[type='radio']:checked");
PostRBVal = selected.val();
jQuery.post("http://xyz/x/Update.php", {
GetStarOneValue : PostStartone ,
GetStarSecValue : PostStarSec ,
GetStarThirdValue : PostStarThird ,
GetCaptchValue : PostCapVal,
GetRadioBTNValue : PostRBVal});
});
</script>

innerText is the "old Internet Explorer" way of doing it.
Try textContent instead. Ideally you should use elem.textContent || elem.innerText, but if you're using jQuery you can just do jQuery("#the_id_here").text().

jQuery: animation gets stuck/crashes in Chrome Browser only

Here's my code which I hosted in a public folder in dropbox
This simple animation freezes after a while when running on google chrome, I tested on 4 different browsers(Chrome, IE 9, Opera, Firefoc). The "page loading" animation runs smooth on all browsers except chrome, what might be causing this?(wont run on jsfiddle as well)
PS: It may take up to 10 - 15 secs until the animation freezes, I know this wouldn't be a problem in the application later, but I still wanna know why it does so because it doesnt on other browsers.

you call infiniteLoop with a few setTimeouts. Why don't us simply use recusion for this?
EDIT: This one works as you may want it to work. It uses jQuery's step callback to calculate the percentage. if it is > 70 %, it starts the next animation.
$(document).ready(function() {
var parent = $('.loadingBar').width(),
parentWidth = parent.toString(),
colors = ["red","blue","yellow","green"],
idx = 0;
var extend = function(color) {
var colorClass = '#' + color + 'Bar',
currentIndex = parseInt($(colorClass).css('z-index')),
afterIndex = currentIndex + 4;
var backColor = $(colorClass).css('background-color');
$(colorClass).css('z-index', afterIndex)
.animate({width:parentWidth},
{step:function(width,tween){
var percent = Math.round(width/parentWidth*100);
if((typeof $(this).data("next") === "undefined" || $(this).data("next") === null) && percent >= 70){
$(this).data("next",true);
if(idx > colors.length-2)
idx = 0;
else
idx++;
extend(colors[idx]);
}
},
duration:2000,
complete:function(){
$(this).data("next",null);
$(this).css('width', '0px');
$('.loadingBar').css('background-color', backColor);
}
});
}
extend(colors[0]);
});

JQuery Code works in Firefox, Opera but not working in Chrome and IE

I have the following code which works in Firefox-20 and Opera but not in Chrome-26 or IE-10. The keyup functions adds Indian commas to the amounts.
$(document).ready(function() {
$("#readyArea").on('change', function() {
$("#underConstArea").val($(this).val()).trigger('change');
});
$('.comma').on('keyup', this, function commaFormatted(){
var delimiter = ","; // replace comma if desired
var amount = $(this).val().replace(/\,/g,'');
var a = amount.split('.',2);
var d = a[1];
var i = parseInt(a[0],10);
if(isNaN(i)) { return ''; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
var n = new String(i);
var a = [];
var cnt=0;
while(n.length > 2)
{
if(cnt == 0)
{
var nn = n.substr(n.length-3);
n = n.substr(0,n.length-3);
cnt++;
}
else
{
var nn = n.substr(n.length-2);
n = n.substr(0,n.length-2);
}
a.unshift(nn);
}
if(n.length > 0)
{
a.unshift(n);
}
n = a.join(delimiter);
amount = n;
amount = minus + amount;
$(this).val(amount);
});
});
Here is the JSFiddle link. (As I said if I open this link in Firefox or Opera the js works but not in Chrome or IE). There are no js errors on the console either. Do I need to do something specific for Chrome and IE?
EDIT
Just to clarify, it is the onChange event that is not firing in Chrome and IE. The same is firing in Firefox and Opera.

I tested on Chrome, and the commas did fine, but I never saw the underConstArea update, while I did see it do so on Firefox after leaving the textbox.
I'm not sure what is happening there, but I have several ways of fixing it.
First, it seems that whether $("#readyArea").on('change') fires is browser dependent. I don't know why, but it seems that Chrome doesn't throw a change event when you're changing the code. Maybe it's trying to avoid an infinite loop of changes; I'm not really sure.
If you're happy with the underConstArea only updating when the number is done (as it behaves in firefox), you can do so on focusout instead of on change. I changed your top lines to
$("#readyArea").on('focusout', function() {
$("#underConstArea").val($(this).val());
});
and it worked fine for me in Chrome and Firefox. Here's an updated fiddle.
Alternatively, if you want it to update every time the user types, just update underConstArea within your commaFormatted function. Just add
$("#underConstArea").val(amount);
at the bottom of your function.
And the link to the second option I offered. Note that I removed any event catching on #readyArea.

Getting 404 error in Firefox & Chrome where as same thing running smoothly on IE what could be the reason

i need to make ma website browser independent it was specifically design for IE. now there are few button on clicking them i get 404 where as the same thing is running smoothly on IE.
i have used Ajax JSON jQuery in my Website
HTML CODE
<input type="hidden" selectedId=" <%=JspWriterHelper.escapeHtml(crt.getTempidPK())%>" name="item<%=JspWriterHelper.escapeHtml(numItems)%>" value="false">
JAVASCRIPT CODE
function createSelected()
{
var noOfSel = 0 ;
var returnValue ='' ;
var sand = 1;
var theForm = document.someForm;
for (var i = 0; i < theForm.length; i++)
{
var e = theForm.elements[i];
var s= theForm.elements[i].selectedId;
if ((e.type == "hidden") && (e.value == "true") && (e.name.indexOf("item")==0) )
{
if(sand == 1)
{
sand = 0;
}
else
{
returnValue += '&';
}
console.log("the value of selected IDS="+e.selectedId);
if (e.selectedId != undefined )
{
returnValue += 'runTemplateId'+ noOfSelections +'='+ e.selectedId;
noOfSelections ++ ;
}
}
}
return (returnValue+'&numberOfTemplates='+noOfSelections);
}
this is working fine for IE where e.selectedId is reflecting correct id but in Firefox this is UNDEFINED
can u tell me why the same thing is undefine for fire fox and crome ?

we can use theForm.elements[i].getAttribute("selectedId") as this will work for firefox ,chrome and IE
where as theForm.elements[i].selectedId; will not work in firefox and chrome and it will give UNDEFINED as value. but the same thing will work fine in IE.

Javascript error: Object Required in ie6 & ie7

I have a javascript function (epoch calendar) which displays a calendar when focus is set on certain text boxes. this works fine in ie8, ff (all versions as far as I can test), opera etc but doesn't work in ie7 or previous.
If i have it set up in a blank html test page it will work so I'm fairly sure it's a conflict with my css (provided to me by a designer).
I've traced the error to these lines of code -
Epoch.prototype.getTop = function (element) //PRIVATE: returns the absolute Top value of element, in pixels
{
var oNode = element;
var iTop = 0;
while(oNode.tagName != 'BODY') {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}
return iTop;
};
Epoch.prototype.getLeft = function (element) //PRIVATE: returns the absolute Left value of element, in pixels
{
var oNode = element;
var iLeft = 0;
while(oNode.tagName != 'BODY') {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}
return iLeft;
};
More specifically, if i remove the actual while loops then the calendar will display OK, just that its positioning on the page is wrong?
EDIT
Code below which sets 'element'
<script type="text/javascript">
window.onload = function() {
var bas_cal, dp_cal, ms_cal;
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDateOfDiag.ClientID%>'));
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDOB.ClientID%>'));
};
</script>
Note: I am using asp.net Master pages which is why there is a need for the .ClientID
EDIT
A further update - I have recreated this without applying css (but including the .js file provided by the designer) the code still works fine which, there must be some sort of conflict between the CSS and my JavaScript?

That would lead me to believe that the tagName does not match, possibly because you have it in upper case. You might try while(!oNode.tagName.match(/body/i)) {

what happens if you add a line of debug code like this:
var oNode = element;
var iLeft = 0;
alert(oNode);
This might give different results in different browsers; I think it may be NULL for IE.
You may want to have a look at the code that provides the value of the 'element' parameter to see if there's a browser-dependant issue there.