Update Input value without passing this as parameter in onclick function and I don't want to Use Id's

Question

I'm working on this app where user can incrementer or decrement the value of input using + and _ buttons, I'm curious to know whether Itis possible to achieve the same Thing without passing this as a parameter to + and - buttons

function increaseAmount(event,amount){
 event.closest('.row').querySelector('.amount-value input[type=number]').value=
    parseInt(event.closest('.row').querySelector('.amount-value input[type=number]').value)+amount;
}
function decreaseAmount(event,amount){
event.closest('.row').querySelector('.amount-value input[type=number]').value=
      parseInt(event.closest('.row').querySelector('.amount-value input[type=number]').value)-amount;
}

<div class="form-group">
   <div class="row break-none input-amount">
      <div class="col align-right">
         <button class="app-action secondary" type="button" role="button" onclick="decreaseAmount(this,100)">
         <span>−</span>
         </button>
      </div>
      <div class="col amount-value">
         <input id="amountvalue2135" type="number" value="1000" step="10" class="form-control">
         <div class="help-block">
            <span class="help-text">Input validation error</span>
         </div>
      </div>
      <div class="col">
         <button class="app-action secondary" type="button" role="button" onclick="increaseAmount(this,100)">
         <span>+</span>
         </button>
      </div>
   </div>
   <br/>
   
   <div class="form-group">
   <div class="row break-none input-amount">
      <div class="col align-right">
         <button class="app-action secondary" type="button" role="button" onclick="decreaseAmount(this,100)">
         <span>−</span>
         </button>
      </div>
      <div class="col amount-value">
         <input id="amountvalue2135" type="number" value="1000" step="10" class="form-control">
         <div class="help-block">
            <span class="help-text">Input validation error</span>
         </div>
      </div>
      <div class="col">
         <button class="app-action secondary" type="button" role="button" onclick="increaseAmount(this,100)">
         <span>+</span>
         </button>
      </div>
   </div>

Yes, with [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). It's much better to use this instead of HTML `on*` attributes. — Emiel Zuurbier, Jun 18 '21 at 08:24
@FlashThunder You can see there is onclick event on buttons for increasing and decreasing value, I'm passing this to functions, and using it to target the button, Is it possible to target the button without passing this as a parameter to function on button click — Mandapati Ganesh, Jun 18 '21 at 08:42
@MandapatiGanesh you need to add id's to the buttons for example: ` — Flash Thunder, Jun 18 '21 at 08:54
Why do you not want to use IDs? How else would you target the specific element? — Joel Hager, Jun 18 '21 at 09:28
It seems a very strange requirement to not "*want*" to use IDs, but maybe you have some limitations you haven't told us about. The duplicate question I linked to answers your question of how to target elements. It uses elements with IDs, but of course Javascript can select elements without using IDs too. A quick search for "javascript select elements" turned up many hits, eg https://stackoverflow.com/q/2694640/6089612, https://stackoverflow.com/q/7353641/6089612 ... — Don't Panic, Jun 18 '21 at 11:02

Update Input value without passing this as parameter in onclick function and I don't want to Use Id's

0 Answers0