Append to value attribute on button click

Question

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.

Dharman · Accepted Answer · 2021-03-02 03:30:03Z

1

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.

edited Mar 2, 2021 at 3:30

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Mar 2, 2021 at 3:24

Abhinav

1041 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OBN · Accepted Answer · 2021-03-02 04:19:34Z

0

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. -->

edited Mar 2, 2021 at 4:19

answered Mar 2, 2021 at 3:25

OBN

3712 silver badges12 bronze badges

2 Comments

Iñigo Zepeda Over a year ago

Hello! I tried using this one but it does not quite work. I also modified it to this: $(".normal-input").attr('value', 'value' + $(this).attr('value')); Do you know what could happen?

OBN Over a year ago

I have edited the response to give a complete solution - please let me know if that works better

Swati · Accepted Answer · 2021-03-02 04:35:44Z

0

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>

answered Mar 2, 2021 at 4:35

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Collectives™ on Stack Overflow

Append to value attribute on button click

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related