CODEWITHSUNDEEP
javascripthtmlbutton
Dustin H
Dustin H

Reputation: 85

Make number in form go up every time button is clicked

I'm very new to HTML and JavaScript, but I wanted to know if there is any way to make the numeric value in a textbox go up by one each time a button is pressed. This needs to be done to multiple textboxes so I was thinking this could be made with a function. 

<html>
<head>
function (add) {
function goes here
}
</head>
<input type="text">
<input type="button" value="Add One" onclick="add()">
</body>
</html>

I am sorry if my code makes no sense, because I don't know how to accomplish this. Any help is very appreciated!

Upvotes: 0

Views: 7356

Answers (3)

Cristiano
Cristiano

Reputation: 2909

I would use jquery for this, so your html should be something like this:

<input type="number" id="numbox">
<button type="button" id="button">

In your javascript file add an event handler:

$("#button").click(addOne);

This means that whenever the element with the id "button" is pressed, the addOne function is called. So from here you write the addOne function, which takes the value of the number text box, adds one to it, and then sets the value of the text box to the new number.

var addOneToEach = function() {
    $(":text").each(function(){
        var num = $(this).val();
        $(this).val(num + 1);
    });
}

Upvotes: 1

Devin R
Devin R

Reputation: 901

This is quite simple, really. Your code will need the following elements:

  • A function in Javascript that is called whenever the button is pressed
  • A way to retrieve the current value of the text box
  • A way to put the new value back into the text box

To refer to a particular element in your page, you will need to give it an id. Don't forget to give it a default value, either in code or in HTML, as well, so that you don't start with an empty text box. For example:

<input type="text" value="0" id="textField"/>

You can then get the value of that text field in Javascript using the following:

var textField = document.getElementById( "textField" );

The Javascript variable textField now contains a reference to the text field, and we can just get its content using textField.value. You can also write back to the contents using the same value variable. You will also need to use the parseInt function to turn the text in the field into a number so that Javascript won't just try to stick the character '1' on the end of it.

In the <HEAD> section of your page, you would add the following:

<script language="Javascript>
function handleButtonClick() {
    var textField = document.getElementById( "textField" );
    var currentValue = parseInt(textField.value);

    // Add one
    currentValue = currentValue + 1;

    // Put it back with the new +1'd value
    textField.value = currentValue;
}
</script>

To call a function in Javascript whenever a button is pressed, you would use an event handler, which signals Javascript to run a particular snippet of code whenever an action happens in the browser. In this case, since you're wanting to run code when the user clicks a button, you would use the onClick handler. You can either set this as part of a script or in your HTML code. Doing it in Javascript is ultimately more robust, but for simplicity, I'm going to do it in HTML code.

<input type="button" onClick="handleButtonClick()"/>

And that's it. When you click the button, assuming you've got it all wired up correctly.

See this page for some basic information about getElementById and this page for some basic info about what other event handlers are available for you.

Upvotes: 2

Arslaan Ejaz
Arslaan Ejaz

Reputation: 1001

Try this.

<script type="text/javascript">
function add() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 1;
    }
</script>
<html>
<head>
function (add) {
function goes here
}
</head>
<div id='txt'></div>
<form action="" method="post">
<input type="text" id='mynum'>
<input type="button" onclick="add()">
</form>
</body>
</html>

hope will help you

Upvotes: 1

Related Questions