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 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question onClick do function to near text input?

    This is hopefully a simple fix and I hope someone can help me out, I'm pretty new at coding.
    I have a form on an html page and I want to make it so when a button is clicked, it adds one to the input to the right of it, and when a button to the right of the input is clicked, it will delete one to the left of that button. I don't want to resort to making a new function for each and every form, because there will be a lot.
    Here is the form and input parts:
    Code:
    <form name="calculate">
    <input type="button" onClick="add()" />
    <input name="result" type="input" readonly="readonly" value="0" />
    <input type="button" onclick="sub()" />
    </form>
    Here is what the function code looks like:
    Code:
    function add()
    {
    var add = 1 * calculate.name.value;
    add = add + 1;
    calculate.name.value = add;
    }
    function sub()
    {
    var add = 1 * calculate.name.value;
    add = add - 1;
    calculate.name.value = add;
    }
    Note: where I called the calculate.name.value, that obviously doesn't work, and I need some way, rather than making multiple functions and changing the name part, to be able to call to a name near the button, if at all possible.

    Any and all ideas are appreciated,
    Thanks!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,641
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Code:
    <form name="calculate">
    <input type="button" onClick="add('result')" />
    <input id="result" name="result" type="input" readonly="readonly" value="0" />
    <input type="button" onclick="sub('result')" />
    </form>
    Code:
    function add(f)
    {
    var add = +document.getElementById(f).value;
    document.getElementById(f).value = add + 1;
    }
    function sub(f)
    {
    var add = +document.getElementById(f).value;
    document.getElementById(f).value = add - 1;
    }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,020
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    I have the idea that this is homework.

    A good many errors, I am afraid. You may not give a variable and a function the same name (add). There is no "type =input". And your textbox is named "result", not "name".


    Code:
    <form name="calculate">
    <input type="button" value = "Add" onClick="add()" />
    <input type="text "name="result"  size = "4" readonly="readonly" value="0" />
    <input type="button" value = "Subtract" onclick="sub()" />
    </form>
    
    <script type = "text/javascript">
    
    function add() {
    var addOne =  Number(document.calculate.result.value)+1;
    document.calculate.result.value = addOne;
    }
    
    function sub() {
    var subOne = Number(document.calculate.result.value) -1;
    if (subOne <0) {subOne = 0}  // not to turn negative
    document.calculate.result.value = subOne;
    }
    
    </script>
    Form elements should be referenced by name, not by id, as only a name value can be passed to a server-side script. To convert a string value to a number prefer to use Number() rather than *1 or a prefix+.


    Due to the adverse weather conditions there are rail replacement buses operating from the car park. We apologise for any incontinence this may cause. - Notice at Flitwick Station (Beds.)
    Last edited by Philip M; 02-05-2012 at 07:48 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the posts felgall and Philip. Philip, I made some fixes to my coding thanks to you, but what I was wanting to be able to do was, rather than writing a new function for every button and text input, is there a way to getElementById, such as felgall was suggesting (I couldn't get it to work, felgall), in order to add or subtract one from a new text input?
    Basically, there are going to be multiple text inputs and add/subtract buttons for each input, and I want to be able to add/subtract without writing many functions.
    By the way, this is not for homework , I'm working on a project and I was just needing a bit of guidance, which I appreciate!

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the posts felgall and Philip. Philip, I made some fixes to my coding thanks to you, but what I was wanting to be able to do was, rather than writing a new function for every button and text input, is there a way to getElementById, such as felgall was suggesting (I couldn't get it to work, felgall), in order to add or subtract one from a new text input?
    Basically, there are going to be multiple text inputs and add/subtract buttons for each input, and I want to be able to add/subtract without writing many functions.
    By the way, this is not for homework , I'm working on a project and I was just needing a bit of guidance, which I appreciate!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,020
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Here you are:-

    Code:
    <form name="calculate">
    <input type="button" value = "Add" onClick="add(1)" />
    BOX 1 <input type="text" name="result1"  size = "4" readonly="readonly" value="0" />
    <input type="button" value = "Subtract" onClick="sub(1)" />
    <br>
    <input type="button" value = "Add" onClick="add(2)" />
    BOX 2 <input type="text" name="result2"  size = "4" readonly="readonly" value="0" />
    <input type="button" value = "Subtract" onclick="sub(2)" />
    <br>
    <input type="button" value = "Add" onClick="add(3)" />
    BOX 3 <input type="text" name="result3"  size = "4" readonly="readonly" value="0" />
    <input type="button" value = "Subtract" onclick="sub(3)" />
    </form>
    
    <script type = "text/javascript">
    
    function add(box) {
    var r = Number(document["calculate"]["result"+box].value); 
    document["calculate"]["result"+box].value = r+1;
    }
    
    function sub(box) {
    var r = Number(document["calculate"]["result"+box].value); 
    if (r>0) {   // not to be negative
    document["calculate"]["result"+box].value = r-1;
    }
    }
    
    </script>
    Last edited by Philip M; 02-05-2012 at 09:14 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Philip,

    I've been searching far and wide for the solution you've posted here. Do you have any suggestions on how to hold the value once you click the subtract button? I'm creating a countdown ticker set at 500 and every time a form is submitted, I'm subtracting 1 from the ticker. I assume it has something to do with holding the value in a database/registry, but am just not sure. Any insight you have would be much appreciated!

    Many thanks..

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,020
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by stereogirlny View Post
    Hi Philip,

    I've been searching far and wide for the solution you've posted here. Do you have any suggestions on how to hold the value once you click the subtract button? I'm creating a countdown ticker set at 500 and every time a form is submitted, I'm subtracting 1 from the ticker. I assume it has something to do with holding the value in a database/registry, but am just not sure. Any insight you have would be much appreciated!

    Many thanks..
    You must use server-side coding to count the number of form submissions. JavaScript running in a browser is a client-side language. JavaScript does not have any commands for reading or writing files. Modern browsers can read files on the server using an Ajax call, but otherwise JavaScript has no capability to read from, write to, modify or delete a file (except a cookie), communicate with the server, access a database, the client's operating system or the Windows registry, or alter the default behaviour of the browser.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    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
    •