Correct way to insert button value into my input (jQuery)

Question

I have some sort of calculator, and I need to insert .num-pad_number.html() into my input. Is that correct way to do this:

$("#num-pad").on("click", ".num-pad_number", function (event) {
    $("#calc-input").val($("#calc-input").val() + $(this).html());
});

Or it may be more convinient and correct way? Cuz I have some bug with that solution. After some manipulations with websockets, "calculator" starts to duplicate every number, for example I need "5" but it insert "55".

Input.val() and $(this).html() both gives you an string of a number and by default they join as string not sum like numbers. '5' + '5' = '55' not 10; — Fered
– Fered, Commented Jul 6, 2017 at 22:36
You want to append the value of the button that's being clicked? — Gustaf Gunér
– Gustaf Gunér, Commented Jul 6, 2017 at 22:36
Use .text() not .html() since you won't be adding HTML, only the text content. — Scott Marcus
– Scott Marcus, Commented Jul 6, 2017 at 22:37

Gustaf Gunér · Accepted Answer · 2017-07-06 22:41:44Z

1

Slightly modified. Using .text() instead of .html(). Shorter event function. Working example below:

$('#num_pad .num-pad_number').click(function() {
  $("#calc-input").val($("#calc-input").val() + $(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="calc-input" type="text"/>

<div id="num_pad">
  <button class="num-pad_number">1</button>
  <button class="num-pad_number">2</button>
  <button class="num-pad_number">3</button>
  <button class="num-pad_number">4</button>
  <button class="num-pad_number">5</button>
  <button class="num-pad_number">6</button>
  <button class="num-pad_number">7</button>
  <button class="num-pad_number">8</button>
  <button class="num-pad_number">9</button>
</div>

answered Jul 6, 2017 at 22:41

Gustaf Gunér

2,2674 gold badges19 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Correct way to insert button value into my input (jQuery)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related