PDA

View Full Version : Not sure how to use document.getElementById().getAttribute()



mahoganman
06-04-2014, 10:16 PM
In javascript is it possible to define a variable using: document.getElementById("name1").getAttribute("data-name2");

If, not how is this properly assigned?

The reason for this is I wrote a script that uses a Select <Option value=" " with a number to calculate the price, however my shopping cart script requires a separate Name in the value and since you cannot have Value1=" " and Value2=" " I thought I might be able to use an Attribute data- to make this happen.

Here is a jsbin of a working code of my project, so you can see the output, this works and displays the Length and Price, however because there is no Value of FontName, this fails my shopping cart
JS Bin - Collaborative JavaScript Debugging (http://jsbin.com/bomileqe/2/edit?html,css,js,console,output)

My second jsbin option with my revisions that I am hoping to get working:

JS Bin - Collaborative JavaScript Debugging (http://jsbin.com/fatol/3/edit?html,css,js,console,output)
This option I have changed the option value and added a data- attribute, however it fails to get the Length and Price.
In this second example with where am I going wrong with the getAttribute?

Dormilich
06-05-2014, 11:19 AM
the data-* attributes are used via the dataset property:


var name2 = document.getElementById("name1").dataset.name2;





generally, in browser context you don’t need to use getAttribute/setAttribute at all. you’re provided with direct properties in all valid cases*.

* - i.e. attributes as defined in the HTML standard, sometimes also called HTMLDOM because it extends the DOM interfaces

glenngv
06-05-2014, 09:42 PM
the data-* attributes are used via the dataset property:


var name2 = document.getElementById("name1").dataset.name2;





generally, in browser context you donít need to use getAttribute/setAttribute at all. youíre provided with direct properties in all valid cases*.

* - i.e. attributes as defined in the HTML standard, sometimes also called HTMLDOM because it extends the DOM interfaces
But for IE, the dataset is only supported in IE11 based from https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset#Browser_compatibility

For cross-browser compatibility, it would still be better to use getAttribute.

mahoganman
06-05-2014, 10:06 PM
Thanks for the replys, here is how I solved the problem. I know I should have named my attributes with a data- but....

<script type="text/javascript">
function getlength()
{
// define what user selected from form option combos
var fontCombo = document.getElementById('font_chooser_combo');
var heightCombo = document.getElementById('choose_height_combo');
// define data attributes in order to calculate a number for formulas
var fontChosen = fontCombo.options[fontCombo.selectedIndex].getAttribute('lengthratio');
var heightChosen = heightCombo.options[heightCombo.selectedIndex].getAttribute('charheight');
var charsTotal = document.getElementById('charactercount').value;
// calculate the font length * total characters typed
var calcAvgLength = fontChosen*heightChosen*charsTotal;
// display the length of the phrase customer typed
var displayLength = document.getElementById('displayLength');
displayLength.innerHTML = calcAvgLength;
}
</script>


Then I essentially duplicated this with minor adjustments for the price. Works like a charm!