I have the following code to populate an array.
matches = $('.cultureShortNameColumn');
numMatches = matches.length;
cultures = [];
for (var i = 0; i < numMatches; i++) {
cultures[i] = matches[i].childNodes[0].textContent;
}
This code works perfectly in FireFox, Chrome and IE 9 and above.
However, in IE 8 and below, I see in the debugger that, the following expressions evaluate as follows:
matches[i] {...} DispHTMLTableCell
matches[0].childNodes {...} DispDOMChildrenCollection
matches[0].childNodes[0] {...} DispHTMLDOMTextNode
matches[0].childNodes[0].textContent undefined Undefined
However, when I expand the matches[0].childNodes[0] local variable in the Watches window in the debugger, it does have a textContent property that reads a valid value.
Okay, I did a small bit of googling after posting this question and there's an answer right there in the top links:
The answer is to use nodeValue instead of textContent.
I tried it and it works.
matches[0].childNodes[0].nodeValue;
Related
I'm looking for a solution that creates object keys (is that worded correctly?) dynamically.
Arbitrary example, but this works in chrome and firefox
var weeks = {}
for(var i = 0; i < 5; i++){
$.extend(weeks, {["week" + i] : (i * 2)}
}
//weeks = {"week0":0,"week1":2,"week2":4,"week3":6,"week4":8}
Or alternative arbitrary example
var object = {
["a" + 50]: "value"
}
The problem seem to be rooted in the [] operator, but I don't understand how or why this problem only occurs in IE. I have not tested in previous versions to IE11, but I would assume the problem would persist there aswell.
Since the problem seem to be with the [] operator itself, creating my keys in a variable and then shoving that variable into my [] wouldn't do anything to fix the problem, so I seem to be both out of ideas and keywords to google.
So is there a way to dynamically create object keys in IE?
IE11 is not a "modern" web browser in the same way Chrome, Firefox or even Edge is. It doesn't support the new "object literal extensions" from ES6 (ES2015).
The syntax you are using is called "computed property keys", you cannot use it in IE11. You need to do this the "old fashioned" way.
var weeks = {};
for(var i = 0; i < 5; i++){
var tmp = {};
tmp["week" + i] = i*2;
$.extend(weeks, tmp);
}
i am getting the above error in ie 10 please give me a suggestion.it is working fine in
function getSelectedIndex(element, value) {
var selectedIndex = 0;
for(i = 0; i < element.options.length; i++) {
if(element.options[i].value == value) {
selectedIndex = i;
break;
}
}
return selectedIndex;
}
element.options.length is giving Unable to get property 'options' of undefined or null reference.please suggest me a sample code.
Edit : It was working for me when I was using IE11 with compatibility mode, but when I removed it and ran it in normal mode, the above issue occurred.
Use elements.options.indexOf(value) (assuming element is defined, which it doesn't seem to be). By the way, your current design will return zero if the first element matches or there is no match at all. If you really want to write your own version of indexOf, better to return -1 in the case of no match as it does.
actually the message gives you exactly what you need to know.
you are trying to read a property of something that does not have a value, and here it is "element" or "element.options", check the place where they are set before the function call.
for IE10 it's a strict one, it doesn't support the use of
element.options.length
instead you should use:
document.getElementById("optionsID").value
I hope this helps
I'm trying to call document.getElementsByTagName, and I'm getting back undefined as a result, no matter what parameter I pass. (Even if I pass "*".)
I tried Googling for it, but all the search results were about elements of the getElementsByTagName result array being undefined. What I'm getting is undefined as the result itself, and it's driving me up the wall.
Does anyone know what can cause this? (Using Firefox 12.0. In Chrome I get the expected results.)
EDIT: OK, here's sample code:
function buttonClick(){
var xhr = new XMLHttpRequest();
var msg = document.getElementById('message');
var buttons = document.getElementsByTagName("button");
var button, i;
for (i = 0; i < buttons.length; ++i){
button = buttons[i];
msg.removeChild(button);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
handleResult(xhr.responseText, msg);
}
};
xhr.open("POST", location.href, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("cmd=MyCommand");
}
And the getElementsByTagName always returns undefined, whether I trace it in Firebug's Script tab or call it from the Console tab. (Also in Firebug, since this seems to be confusing people. Apparently there are way too many consoles floating around.).
As proof, here's what I've been getting when I tried to use the Firebug console:
>>> document.getElementsByTagName("button");
undefined
>>> msg.getElementsByTagName("button");
undefined
>>> msg.getElementsByTagName
getElementsByTagName()
>>> msg.getElementsByTagName("BUTTON");
undefined
>>> msg.getElementsByTagName("*");
undefined
>>> document.getElementsByTagName("*");
undefined
>>> document.getElementsByTagName("body");
undefined
The markup is (or ought to be) irrelevant. It's a valid, well-formed HTML page with some buttons and other elements on it. This JS function is attached to the onclick of one of the buttons. But it looks something like this:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
blah
</head>
<body>
<script type="text/javascript" src="/myJS.js"></script>
<div id="page-container">
<div id="message"><button onclick="buttonClick();">Button 1</button><button onclick="ButtonClick2()">Button 2</button></div>
</div>
</body></html>
edit:
This is a bug in firebug and is fixed by upgrading to 1.10.0a7
Because it is impossible for this method to return undefined, there are 2 possibilities:
Your debugging tools are lying to you
document.getElementsByTagName is not referencing the original host object. It should print
function getElementsByTagName() {[native code]} when referenced in console.
You should be able to reliably to see if it's in fact undefined (in firefox) with this:
delete window.alert;
window.alert(buttons);
The delete is a NOOP if window.alert is already referencing the original host object, otherwise
it will restore it.
If it alerts undefined, you should be able to do
delete document.getElementsByTagName
to restore the host object reference.
All console references here refer to the built in Web Console that comes with firefox by default.
I got the problem when I made a difficult to see syntax error. I used parenthesis when I should have used square brackets
Wrong:
selectedItem._element.childNodes(0).getElementsByTagName('input').item();
Right:
selectedItem._element.childNodes[0].getElementsByTagName('input').item();
See the difference? Note, the top syntax works is older versions of IE, like IE8, but it doesn't work in ie10, ie11, Edge etc
Isn't REPL a stand-alone, browser-independent JavaScript environment? While, in your case, in just happens to be running in your browser as a plugin, it's supposed to mimic a "clean room" per say...
To summarize this guy's answer: document.getElementById() returns null when using mozrepl (but not in firebug)
By default, you'r in the browser's context, not the document's.
Try this to switch to the document instead:
repl.enter(content)
You can't alert an Array, you should do a for loop to alert it. Example:
var x = document.getElementsByTagName('a');
for (var i = 0, c = x.length ; i < c ; i++) {
alert('Element n° ' + (i + 1) + ' : ' + x[i]);
}
This issue is also raised when we try to access element without array index. Because document.getElementsByTagName('tag') returns an array.
r = r.replace(/<TR><TD><\/TD><\/TR>/gi, rider_html);
...does not work in IE but works in all other browsers.
Any ideas or alternatives?
I've come to the conclusion that the variable r must not have the value in it you expect because the regex replacement should work fine if there is actually a match. You can see in this jsFiddle that the replace works fine if "r" actually has a match in it.
This is the code from fiddle and it shows the proper replacement in IE.
var r = "aa<TR><TD></TD></TR>bb";
var rider_html = " foo ";
r = r.replace(/<TR><TD><\/TD><\/TR>/gi, rider_html);
alert(r);
So, we can't really go further to diagnose without knowing what the value of "r" is and where it came from or knowing something more specific about the version of IE that you're running in (in which case you can just try the fiddle in that version yourself).
If r came from the HTML of the document, then string matching on it is a bad thing because IE does not keep the original HTML around. Instead it reconstitutes it when needed from the parsed page and it puts some things in different order (like attributes), different or no quotes around attributes, different capitalization, different spacing, etc...
You could do something like this:
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var children = rows[i].children;
if (children.length === 1 && children[0].nodeName.toLowerCase() === 'td') {
children[0].innerHTML = someHTMLdata
}
}
Note that this sets the value of the table cell, rather than replacing the whole row. If you want to do something other than this, you'll have to use DOM methods rather than innerHTML and specify exactly what you actually want.
Im working on a script which removes the default values in form elements using Prototype and LightView. The scripts works fine in Safari, but not at all in FireFox (3.5.5).
This fires when a lightview is triggered.
document.observe('lightview:opened', function() {
if($('contact_form')) {
var defaults = new Array();
var ins = $('contact_form').getElements();
var inlen = ins.length;
for(i=0; i < inlen; i++) {
alert(i)
if($(ins[i]).readAttribute('type') != 'image') {
defaults[ins[i].name] = $(ins[i]).value;
$(ins[i]).observe('focus', checkDefault.bind(event, ins[i]));
}
}
function checkDefault(name, event) {
alert(name.name)
if($(name).value == defaults[name.name]) {
alert(defaults[name.name])
$(name).value = '';
}
}
}
});
The strange this is, when I check for the length of inlen the proper number is alerted, but when I alert 'i', only the first number is alerted. I can't figure out why this is happening.
Any ideas what's wrong here?
Here is the address of the problem:
http://bearing.krd-design.net/
Thanks
Rich
I'm not sure if this would cause that problem, but you are missing var:
for(var i=0; i < inlen; i++) {
Also, there are no semi-colon's after any of your alert()s.
Try correcting those, and see if it makes a difference.
EDIT:
As pointed out by Matt, in the comments: neglecting var creates the variable in the global scope. This could cause a problem if prototypejs also uses a global variable i (but I sincerely doubt that).
EDIT 2:
Another possibility is the array accessing by input name:
defaults[ins[i].name] = $(ins[i]).value;
Try declaring defaults as an object:
var defaults = {};
It sounds like a timing issue; the alerts slow execution to the point where your code works in FF. Do you use FireBug?
First of all, I think it is only going to i=0 is probably because the JS broke during the first iteration. To troubleshoot, I'd put alert() in between lines and see which line is breaking it.
My guess of the problem should be in the line:
$(ins[i]).observe('focus', checkDefault.bind(event, ins[i]));
The first parameter of the 'bind' function should be context and you are passing in 'event'. 'event' isn't defined and it should be the context or scope.
In your case, I think you can just use:
$(ins[i]).observe('focus', checkDefault(ins[i]));