CODEWITHSUNDEEP
javascript
Swee Hong
Swee Hong

Reputation: 539

HTML Using this.parentNode.querySelector

I am using this.parentNode.querySelector('input[type=number]').stepDown(); to minus the number in my input value, how to stop running this.parentNode.querySelector('input[type=number]').stepDown(); when the value reach <= 0?

Here is my coding https://jsfiddle.net/hong5305/495ty0gq/1/

<div class="aaa-input">
  <a href="javascript:;" onclick="this.parentNode.querySelector('input[type=number]').stepDown();">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="max-width:70%;"></div>
    title</a>
  <div class="control-group">
    <input type="number" value="5" name="prodqty[1]" id="prodqty">
  </div>
</div>

Upvotes: 0

Views: 3005

Answers (4)

FZs
FZs

Reputation: 18619

You can do it by a single if statement, that check's whether the number input's value is greater than 0.

I recommend you to avoid using inline JS event listeners. Instead use something like the following. The JS part can also handle an arbitrary number of .aaa-inputs without any code repetition:

document.addEventListener('DOMContentLoaded', () => {
  for(const elem of document.querySelectorAll('.aaa-input')){
    elem.querySelector('a').addEventListener('click', () => {
      const numberInput = elem.querySelector('input[type=number]')
      if(numberInput.value > 0)
        numberInput.stepDown();
    })
  }
})
<div class="aaa-input">
  <a>
    <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="max-width:70%;">
    </div>
    title
  </a>
  <div class="control-group">
    <input type="number" value="5" name="prodqty[1]" id="prodqty">
  </div>
</div>

<div class="aaa-input">
  <a>
    <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="max-width:70%;">
    </div>
    title
  </a>
  <div class="control-group">
    <input type="number" value="5" name="prodqty[1]" id="prodqty">
  </div>
</div>

<div class="aaa-input">
  <a>
    <div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="max-width:70%;">
    </div>
    title
  </a>
  <div class="control-group">
    <input type="number" value="5" name="prodqty[1]" id="prodqty">
  </div>
</div>

Upvotes: 1

Rush W.
Rush W.

Reputation: 1361

The min attribute specifies the minimum value for an element.

Tip: Use the min attribute together with the max attribute to create a range of legal values.

Note: The max and min attributes works with the following input types: number, range, date, datetime-local, month, time and week.

Syntax

<input min="number|date">

Code -

<div class="aaa-input">
			<div style="float:left; background: white;box-shadow:0px 0px 10px rgb(0,0,0,0.1); padding:0.5em; border-radius:10px; position:relative; margin-right:1em;margin-bottom:1em; font-size:0.9em">
				<a href="javascript:;" onclick="this.parentNode.querySelector('input[type=number]').stepDown();"><div style="height:7em; line-height:7em;">
					<img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="max-width:70%;">
				</div>title</a>
				<div class="control-group">
        		<input type="number" value="5" name="prodqty[1]" id="prodqty" min='0'>
    			</div>
			</div>
		</div>

Upvotes: 1

Ben
Ben

Reputation: 624

You can just check the value of the input before calling stepDown:

<a href="javascript:;" onclick="if(this.parentNode.querySelector('input[type=number]').value > 0)this.parentNode.querySelector('input[type=number]').stepDown();"><div style="height:7em; line-height:7em;">

And your function will not be called when the input reach 0. However, as said by others in the comments, coding like that will lead to errors.

Upvotes: 1

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

add min property to the input element. this should fix your problem.

<div class="aaa-input">
  <a href="javascript:;" onclick="this.parentNode.querySelector('input[type=number]').stepDown();">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" style="max-width:70%;"></div>
    title</a>
  <div class="control-group">
    <input type="number" value="5" min="0" name="prodqty[1]" id="prodqty">
  </div>
</div>

Upvotes: 1

Related Questions