I have a form DOM element:
var virDom = document.getElementsByTagName("form")[0];
virDom has two fields with IDs creditId and pwdId... I can access virDom.creditId without any issue, but virDom.pwdId.. is failing with a syntax error, because of the periods contained in the name.
How can I access such properties?
Use bracket notation:
virDom['creditId']
virDom['pwdId..']
This applies to any object, and it is particularly useful for non-identifier-safe characters and also for accessing keys that you may not know ahead of time.
For a nested object with a special character like below,
var details = {"name-details": {"first-name": "Kiran"}}
use
console.log(details["name-details"]["first-name"])
Related
I have a form DOM element:
var virDom = document.getElementsByTagName("form")[0];
virDom has two fields with IDs creditId and pwdId... I can access virDom.creditId without any issue, but virDom.pwdId.. is failing with a syntax error, because of the periods contained in the name.
How can I access such properties?
Use bracket notation:
virDom['creditId']
virDom['pwdId..']
This applies to any object, and it is particularly useful for non-identifier-safe characters and also for accessing keys that you may not know ahead of time.
For a nested object with a special character like below,
var details = {"name-details": {"first-name": "Kiran"}}
use
console.log(details["name-details"]["first-name"])
I am using this script to make a style object of all the inherited, etc. styles.
var style = css($(this));
alert (style.width);
alert (style.text-align);
With the following, the first alert will work fine, but the second one doesn't... it's interpreting the - as a minus I assume. The debugger says 'uncaught reference error'. I can't put quotes around it, though, because it isn't a string. So how do I use this object property?
Look at the comments. You will see that for CSS properties, the key notation is not compatible with a number of properties. Using the camel case key notation therefore is the current way:
obj.style-attr // would become
obj["styleAttr"]
Use key notation rather than dot
style["text-align"]
All arrays in JavaScript are objects and all objects are just associative arrays. This means you can refer to a place in an object just as you would refer to a key in an array.
arr[0]
or the object
obj["method"] == obj.method
A couple things to remember when accessing properties this way:
they are evaluated so use strings unless you are doing something with a counter or using dynamic method names.
This means obj[method] would give you an undefined error while obj["method"] would not
You must use this notation if you are using characters that are not allowed in JavaScript variables.
This regex pretty much sums it up:
[a-zA-Z_$][0-9a-zA-Z_$]*
The answer to the original question is: place the property name in quotes and use array style indexing:
obj['property-with-hyphens'];
Several have pointed out that the property you are interested in is a CSS property. CSS properties that have hyphens are automatically converted to camel casing. In that case you must use the camel cased name like:
style.textAlign;
However this solution only works for CSS properties. For example,
obj['a-b'] = 2;
alert(obj.aB); // undefined
alert(obj['a-b']); // 2
CSS properties with a - are represented in camelCase in JavaScript objects. That would be:
alert( style.textAlign );
You could also use a bracket notation to use the string:
alert( style['text-align'] );
Property names may only contain characters, numbers, the well known $ sign and the _ (thanks to pimvdb).
Use brackets:
var notTheFlippingStyleObject = {
'a-b': 1
};
console.log(notTheFlippingStyleObject["a-b"] === 1); // true
More information on objects: MDN
NOTE: If you are accessing the style object, CSSStyleDeclaration, you must use camelCase to access it from JavaScript. More information is here.
alert(style.textAlign)
or
alert(style["textAlign"]);
To directly answer the question: style['text-align'] is how you would reference a property with a hyphen in it. But style.textAlign (or style['textAlign']) is what should be used in this case.
Hyphenated style properties are referenced via camelCase in JavaScript, so use style.textAlign.
To solve your problem: The CSS properties with hyphens in them are represented by JavaScript properties in camelCase to avoid this problem. You want: style.textAlign.
To answer the question: Use square bracket notation: obj.prop is the same as obj["prop"] so you can access property names using strings and use characters that are forbidden in identifiers.
I think in the case of CSS styles they get changed to camelCase in JavaScript, so test-align becomes textAlign.
In the general case, where you want to access a property that contains non-standard characters, you use array-style: ['text-align']
The object property names are not one-to-one matches for the CSS names.
At first, I wondered why the solution didn't work on my end:
api['data-sitekey'] // Returns undefined
...later on I figured out that accessing data attributes was different:
It should be like this:
var api = document.getElementById("some-api");
api.dataset.sitekey
The line below (allegedly) looks for a form with id frm1 (W3S source).
var x = document.forms["frm1"];
Why should it even work? If you look in the reference, document.forms returns the collection of forms. There are no associative arrays in JS, so document.forms["frm1"] basically asks for a property called frm1 of the returned collection. I think the right way is to use namedItem("frm1").
Is it merely a mistake in this tutorial, maybe something that worked in the past and is no longer valid?
As #Teemu pointed out, the answer you're looking for lies here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
HTMLCollection.namedItem()
Returns the specific node whose ID or, as a fallback, name matches the string specified by name. Matching by name is only done as a last resort, only in HTML, and only if the referenced element supports the name attribute. Returns null if no node exists by the given name.
While this is true and works fine for ID's when given a string, it also supports indices:
HTMLCollection also exposes its members directly as properties by both name and index. HTML IDs may contain : and . as valid characters, which would necessitate using bracket notation for property access. Currently HTMLCollections does not recognize purely numeric IDs, which would cause conflict with the array-style access, though HTML5 does permit these.
As you can see, there are problems present with mixing ID and index together. But this allowed it to have a short and sweet syntax as you can see. HTML5 has eased up the strictness, but conflicts can result.
I'm going through a javascript file having some functions like this:
'form_validation': function(form,error_bin){
for(var field in form){
if(field.substr(0,1) != "$"){
this.validation_messages(field,form,error_bin);
}
}
}
I want to understand what is the difference between defining a function with quotes (like mentioned above) and without quotes
EDIT: I've also observed that the functions having name in quotes are being called from a different file (like: ServiceName.functionName()), while without quotes are being called from the same file.
This is an Angularjs code
The two are equivalent syntax for object literals. The quotes allow you to use keys that aren't legal variable names, like so:
var foo ={ 'variable name':2}
There's nothing significant about the fact that the value assigned to the object key is a function. In JavaScript objects are (almost) just key value pairs of strings and arbitrary objects.
JavaScript has something called Objects these are link associative array's in other languages. Object have item. Each item has a key(name) and a value. Key's follow regular JavaScript variable names. You can check valid variable names here. Valid variable names do not need to be in quotes. Sometimes, to include special characters, the name is a string.
my_value <- Valid
my-value <- Invalid (needs to be in string)
my value <- Invalid (needs to be in string)
both are same for javascript objects. but you should avoid using quotes as a coding standard.
I have a form DOM element:
var virDom = document.getElementsByTagName("form")[0];
virDom has two fields with IDs creditId and pwdId... I can access virDom.creditId without any issue, but virDom.pwdId.. is failing with a syntax error, because of the periods contained in the name.
How can I access such properties?
Use bracket notation:
virDom['creditId']
virDom['pwdId..']
This applies to any object, and it is particularly useful for non-identifier-safe characters and also for accessing keys that you may not know ahead of time.
For a nested object with a special character like below,
var details = {"name-details": {"first-name": "Kiran"}}
use
console.log(details["name-details"]["first-name"])