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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question How to obtain the value in a button?

    I am new in JS, and meet a problem, asking for some suggestions, really appreciated.

    The question is I don't know how to obtain the value in a button by an independent method, the codes are below:

    I:
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
       <input type="button" id="btn1" value="A" onclick="alert(btn1.value);"/>
    </body>
    </html>
    By using this code, I could get the value which is "A"


    II:
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function showID() {
                alert(this.id);
            }
        </script>
    </head>
    <body>
       <input type="button" id="btn1" value="A"  onclick="showID()"/>
    </body>
    </html>

    III:
    Code:
    <head>
        <title></title>
        <script type="text/javascript">
            function showIDByTagName() {
                var btn = document.getElementsByTagName("input");
                alert(btn.id);
            }
        </script>
    </head>
    <body>
       <input type="button" id="btn1" value="A" onclick="showIDByTagName()"/>
    </body>
    </html>
    However, by II and III, it alerts the value of the button is "undefined", really confused, looking for some help, thank you very much

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    1. Why are you trying to use .id if you want to access the value? Why not use .value?
    2. In II: You assigned an event handler using one of the onxxxxx attributes. In that case the context for the function does not change to be a reference to the DOM object, so "this" will be a reference to the window object instead.
    3. In III: getElementsByTagName (mind the 's') will return a collection of DOM objects which is essentially an array. In order to retrieve the first object from the array, you will have to use the index [0] on it
    Code:
    <input type="button" id="btn1" value="A" onclick="showValue(this)"/>
    
    
    function showValue(obj) {
       alert(obj.value);
    }

  • Users who have thanked devnull69 for this post:

    clathrun (09-06-2012)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,672
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Code sample #1 has alert(btn1.value); and code samples #2 and 3 have alert(this.id); and alert(btn.id);, respectively. Notice any difference?

  • Users who have thanked VIPStephan for this post:

    clathrun (09-06-2012)


  •  

    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
    •