Javascript, как установить максимальное и минимальное значение - PullRequest
Новая
       8

Javascript, как установить максимальное и минимальное значение

0 голосов
/ 05 сентября 2018

Мне нужно иметь возможность установить максимальное и минимальное значение для моего поля количества на моем форуме, который использует javascript. Я попытался добавить максимальное и минимальное значение, и я посмотрел учебники в Интернете, но они, кажется, не работают для меня (если я не делаю это неправильно, что очень возможно, так как я новичок в 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>

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Я добавил if для каждой функции EventListener 

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>
0 голосов
/ 05 сентября 2018

Вы можете установить 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>
0 голосов
/ 05 сентября 2018

Получите максимально допустимое значение для числового поля: 

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

Изменить максимальное значение: 

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