JQuery onclick function - preventing page reload and adding the ability to use this as a variable in called function

Question

I am having a bit of trouble creating a custom input[type=number].

Starting from the top, I have manipulated an input[type=number] to have custom increment buttons.

These buttons when clicked I wish to figure out the current value of the input and either plus or minus one to that value without refreshing the page.

To my knowledge buttons on click shouldn't refresh a page, which is not the case with my code.

I also am having trouble using 'this' as a variable to make the script reusable.

Please can someone help me link my buttons to my script, stop the reload issue, and to actually increment the input up and down depending on user engagement?

function InputStepUp() {
 var input = this.parentNode.querySelector('input[type=number]').val();
 console.log(input);
 var inputStepUp = input + 1;
 console.log(inputStepUp);
 input.val(inputStepUp);
 console.log(input);
}
function InputStepDown() {
 var input = this.parentNode.querySelector('input[type=number]').val();
 console.log(input);
 var inputStepDown = input - 1;
 console.log(inputStepDown);
 input.val(inputStepDown);
 console.log(input);
}

input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #585CD3;
display: inline-flex;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 20px;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 10px;
height: 2px;
background-color: #585CD3;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
text-align: center;
}

<div class="number-input">
 <button onclick="InputStepDown()"></button>
 <input class="cart-product-price-multiplier" type="number" name="updates[]" id="updates_{{ item.key }}" value="5" min="0">
 <button onclick="InputStepUp()" class="plus"></button>
</div>

Here is a stripped down version of my code, hopefully if we can fix this I can fix my more complicated version.

I've exhausted my brain and would really appreciate any advice people could give around using the 'this' variable within a function in this man

Answer 1

In your particular case this is context, from where your function was called, it has global scope - window. You tagged your question jQuery so if you can use it, things come much easier. I've tried to add comments to my code.

I'd like to recommend you a good article about this keyword and it's understanding.

// I've added common class 'btn' to both buttons and I'm handling their clicks
$('.btn').on('click', function() {
  const $input = $('.cart-product-price-multiplier'); //your current input
  const currentVal = Number($input.val()); // current input's value cated to number
  
  // we gonna identify which btn was clicked using class minus/plus
  // or you can set value to each btn and handle it instead
  const newVal = $(this).hasClass('minus') ? currentVal - 1 : currentVal + 1;
  
  $input.val(newVal); //finally we are setting new value to your input
});

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 1px solid #585CD3;
  display: inline-flex;
}

.number-input button {
  outline: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: #585CD3;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number-input">
  <button class='btn minus'></button>
  <input class="cart-product-price-multiplier" type="number" name="updates[]" id="updates_{{ item.key }}" value="5" min="0">
  <button class="btn plus"></button>
</div>