Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Not sure how to use document.getElementById().getAttribute()

    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

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

    JS Bin - Collaborative JavaScript Debugging
    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?

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,350
    Thanks
    13
    Thanked 349 Times in 345 Posts
    the data-* attributes are used via the dataset property:
    PHP Code:
    var name2 document.getElementById("name1").dataset.name2



    Edit: 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
    Last edited by Dormilich; 06-05-2014 at 10:23 AM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Dormilich View Post
    the data-* attributes are used via the dataset property:
    PHP Code:
    var name2 document.getElementById("name1").dataset.name2



    Edit: 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/..._compatibility

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

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •