Javascript如何设置最大值和最小值

Question

我需要能够在使用 javascript 的论坛上为我的数量字段设置最大值和最小值。 iv 尝试添加最大值和最小值，并且 iv 看了一个在线教程，但它们似乎对我不起作用（除非我做错了，因为我是 javascript 新手，这很有可能）

我的 HTML/表单代码：

<form action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php?   ref=product" method="get">
   Game Of Thrones Season 1
   <input type = "hidden" name = "id" value = "M01" />
   <br>
  <select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
</select>
<div class="widthc">
   <button id="minus">−</button>
<input type="number" name="qty" value="0" id="qty"/>
<button id="plus">+</button>

    <button class="button" type="submit">Submit</button>
   </form>

我的 Javascript 代码：

 <script>
 const minusButton = document.getElementById('minus');
 const plusButton = document.getElementById('plus');
 const inputField = document.getElementById('qty');

 minusButton.addEventListener('click', event => {
   event.preventDefault();
 const currentValue = Number(inputField.value) >> 0;
   inputField.value = currentValue - 1;
 });

 plusButton.addEventListener('click', event =>  {
   event.preventDefault();
   const currentValue = Number(inputField.value) >> 0;
   inputField.value = currentValue + 1;
 });
 </script>

Answer 1

获取数字字段允许的最大值：

var x = document.getElementById("myNumber").max;

改变最大值：

document.getElementById("myNumber").max = "10";

Answer 2

我为每个 EventListener 函数添加了一个 if

const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('qty');
var currentValue = 0;

minusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue - 1;
  if (currentValue < 0) {
    inputField.value = 0;
  } else {
    inputField.value = currentValue;
  }
});

plusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue + 1;
  if (currentValue > 10) {
    inputField.value = 10;
  } else {
    inputField.value = currentValue;
  }
});

Game Of Thrones Season 1
<input type="hidden" name="id" value="M01" />
<br>
<select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
</select>
<div class="widthc">
  <button id="minus">−</button>
  <input type="number" name="qty" value="0" id="qty" />
  <button id="plus">+</button>

  <button class="button" type="submit">Submit</button>

Answer 3

您可以将min 和max 设置为输入字段并检查您的javascript 代码。

const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('qty');
var currentValue = 0;

minusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue - 1;
  if (currentValue < inputField.min) {
    inputField.value = inputField.min;
  } else {
    inputField.value = currentValue;
  }
});

plusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue + 1;
  if (currentValue > inputField.max) {
    inputField.value = inputField.max;
  } else {
    inputField.value = currentValue;
  }
});

<form action="https://titan.csit.rmit.edu.au/~e54061/wp/processing.php?   ref=product" method="get">
Game Of Thrones Season 1
  <input type = "hidden" name = "id" value = "M01" />
  <br>
  <select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
  </select>
  <div class="widthc">
  <button id="minus">−</button>
  <input type="number" name="qty" value="0" id="qty" min="0" max="10" />
  <button id="plus">+</button>
  <button class="button" type="submit">Submit</button>
</form>