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 Coder
    Join Date
    Jul 2012
    Location
    Mexico
    Posts
    45
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Button id passing value to javascript

    Is it possible to create a numeric id to asign to buttons (images) generated in a loop and pass that numeric id (the number part) to a function in javascript?

    Something like this:

    1st line:
    Code:
    <input id="q0" type="image" src="http://myurl/button-subtract.png" onclick="SubtractOne(0)"/> // (0) comes from q0
    <input id="q0" type="image" src="http://myurl/button-subtract.png" onclick="AddOne(0)"/> // (0) comes from q0
    2nd line:
    Code:
    <input id="q1" type="image" src="http://myurl/button-subtract.png" onclick="SubtractOne(1)"/> // (1) comes from q1
    <input id="q1" type="image" src="http://myurl/button-subtract.png" onclick="AddOne(1)"/> // (1) comes from q1
    And so on?

  • #2
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    your code is illegal: two controls may not possess the same value for their id attribute, as all IDs must remain unique within the document.

    if you must, use the name attribute to group controls, as it does not need to be unique.

    what you want to do is certainly possible, but not necessary, as you may accomplish the same by passing 'this', as in '...onclick="SubtractOne(this)" ', where the entire tag itself is passed to the javascript function. the function may then retrieve the id from the object itself. Observe:

    function SubtractOne(Caller){
    alert( "the caller's id is " + Caller.getAttribute('id') );
    }

  • Users who have thanked sbhmf for this post:

    juliushg (01-10-2013)

  • #3
    New Coder
    Join Date
    Jul 2012
    Location
    Mexico
    Posts
    45
    Thanks
    9
    Thanked 0 Times in 0 Posts
    It worked. I only had to change all tags and passing the actual index to the function using this:

    Code:
    function AddOne(Caller){
    var strCaller=Caller.getAttribute('id');
    var callnumber=strCaller.replace("quantadd","");
    ++Quantity[callnumber];
    document.getElementById(callnumber).innerHTML=Quantity[callnumber];
    }
    function SubtractOne(Caller){
    var strCaller=Caller.getAttribute('id');
    var callnumber=strCaller.replace("quantsubtract","");
    --Quantity[callnumber];
    document.getElementById(callnumber).innerHTML=Quantity[callnumber];
    }
    in the HTML loop (with ++listIndex):

    Code:
    <input id="quantsubtract" type="image" src="http://myurl/button-subtract.png" onclick="SubtractOne(this)">
    <a id="tagtochange">0</a>
    <input id="quantadd" type="image" src="http://myurl/button-add.png" onclick="AddOne(this)"/>
    
    <script type="text/javascript">
    document.getElementById("tagtochange").id=listIndex;
    document.getElementById("quantadd").id="quantadd"+listIndex;
    document.getElementById("quantsubtract").id="quantsubtract"+listIndex;
    </script>
    Now I have to use "callnumber" to get the position of the arrays. Thanks.


  •  

    Posting Permissions

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