CODEWITHSUNDEEP
javascripthtmljqueryformsjquery-events
Iñigo Zepeda
Iñigo Zepeda

Reputation: 45

Append to value attribute on button click

I am trying to make an input modify each time I click on a button. Kind of like a calculator. The will start at 0. When I click on the button "7" it will change its value to 7, when I click on "4" it will change to 74. Basically like a calculator.

I made this code that does modify the value of the input, however I can't seem to find how I can append more values to that values. Here is my code. Could someone help me?

<input class="normal-input" type="number" step="0.01"> <!-- Value is NULL-->
<button value="7" class="my-buttons" type="button"> 7 </button> <!--Button to change the value of the input-->

 $('.my-buttons').click(function(){
     $(".normal-input").attr("value", $(this).attr('value'));
 }); <!-- The actual function. -->

As you can see the function completely replaces the previous value for the new one. I want it to append the values like in a calculator.

Upvotes: 1

Views: 1731

Answers (3)

Swati
Swati

Reputation: 28522

You just need to concat both the actual value and the value of button which is clicked to get required values .

Demo Code :

$('.my-buttons').click(function() {
  var value = $(".normal-input").val()
  var clicked_button = $(this).attr('value')
  //use val and combined both value
  $(".normal-input").val(value + "" + clicked_button);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="normal-input" type="number">
<button value="7" class="my-buttons" type="button"> 7 </button>
<button value="10" class="my-buttons" type="button"> 10 </button>
<button value="6" class="my-buttons" type="button"> 6 </button>

Upvotes: 0

OBN
OBN

Reputation: 371

In this function:

$(".normal-input").attr("value", $(this).attr('value'));

The second parameter is the value to set:

$(this).attr('value')

You need to have this as a combination of the previous value and the new value:

$(".normal-input").attr('value') + '' + $(this).attr('value')

The blank string is to make sure the final result is a string, not the addition of 2 numbers.

If you would like to convert it to a number, you can use parseInt():

const combinedNumber = $(".normal-input").attr('value') + '' + $(this).attr('value')
const intNumber = parseInt(combinedNumber)

The final code could look something like:

<input class="normal-input" type="number" step="0.01"> <!-- Value is NULL-->
<button value="7" class="my-buttons" type="button"> 7 </button> <!--Button to change the value of the input-->



$('.my-buttons').click(function(){

    const existingValue = $(".normal-input").attr('value')
    const newValue = $(this).attr('value'
    const combinedValue = parseInt(existingValue + '' + newValue)
    $(".normal-input").attr("value", combinedValue);

 }); <!-- The actual function. -->

Upvotes: 0

Abhinav
Abhinav

Reputation: 104

I would suggest you to try doing this:

  • Initialize value to zero
  • whenever click is called, multiply the current value by 10, and add the button value to it.
  • and you can remove the step attribute as per the use case.

Upvotes: 1

Related Questions