JavaScript, HTML, CSS - Как ограничить число / значение, разрешенное в поле ввода, с помощью - Проверка достоверности

Question

https://jsfiddle.net/gcqojLfp/2/

1.) Скрипка js не отображает <div> с идентификатором result2 из HTML.

После нажатия кнопки должна запуститься функция multiply(), которая должна получить innerHTML из <div> с идентификатором result2.

Я не уверен, почему ничего не происходит после нажатия на кнопку в скрипке.Он должен сказать:

"Все числа от 1 до 5, умноженные вместе, равны: 120"

(например, если введено 5).Мы должны увидеть это в result2 div.

2.) Почему текстовое поле с идентификатором factorialInput не ограничивает ввод до 10 при максимуме?Я думал, что установил максимум для этого поля ввода здесь:

<input id="factorialInput" type="number" max="10" size="20"/>

(в соответствии с другими статьями ).

Я также попробовал maxlength - я не понимаю, почему он разрешает числа 11 и выше.

Есть идеи?

JavaScript

function multiply() {
    let num = document.getElementById("factorialInput").value;
    let sum = 1;
    for (let i=1; i<= num; i++) {
        sum = sum * i;
    }

    document.getElementById("result2").innerHTML  = "All of the numbers between 
    1 and " + num + " multiplied together equals: " + sum ;

}

HTML

<div class="row">
    <form id="enterValue">
    Enter a number between 1 and 10: 
    <input id="factorialInput" type="number" max="10" size="20"/>
    <input type ="button" value="Submit" onclick="multiply();" max="10" />
    </form>
    <br><br>
<div id="result2"></div>
</div>

CSS

.row {
    height: 200px;
}

Спасибо!

Answer 1

Кроме того, вы можете выполнить проверку шаблона достоверности БЕЗ Javascript.Спецификация ввода HTML 5 позволяет использовать regex, чтобы сделать ввод действительным / недействительным.

Важное примечание: это только возвращает TRUE / FALSE. Вам решать, что делатьдля создания и отображения любых ошибок.

Примеры:

<input type="number" pattern="[1-9]|0[1-9]|10" placeholder="1 to 10" value="" />

И CSS

input:valid {
  background-color: green;
}

input:invalid {
  background-color: red;
}

Подробнее о стилизация допустимых / недействительных входных данных

Answer 2

Вы можете реализовать keydown для события, чтобы предотвратить недопустимое значение.

$('#factorialInput').on('keydown keyup', function(e){
    if ($(this).val() > 10 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val('');
    }
});

https://jsfiddle.net/viethien/mrt6hw8c/6/

Answer 3

Вы должны вручную проверить, действителен ли ввод, как описано в документации.

function multiply() {
  let input = document.getElementById("factorialInput");
  if ( input.reportValidity() ) {
    let num = input.value;
    let sum = 1;
    for (let i=1; i<= num; i++) {
      sum = sum * i;
    }
    let message = "All of the numbers between 1 and " + num + " multiplied together equals: " + sum;
    document.getElementById("result2").innerHTML  = message;
  }
}

<div class="row">
    <form id="enterValue">
      Enter a number between 1 and 10: 
      <input id="factorialInput" type="number" max="10" size="20"/>
      <input type ="button" value="Submit" onclick="multiply();" max="10" />
    </form>
    <br>
    <br>
  <div id="result2"></div>
</div>

Answer 4

Сначала Если вы посмотрите на консоль, возникнет ошибка, что функция умножения не определена.Перемещение встроенного javascript над html разрешает отсутствующую ссылку на функцию.

Секунда Типовое число input ограничивает ввод чисел максимальным значением, если вы используете стрелки увеличения / уменьшения, ноэто не мешает пользователю вводить большее число.Если вам нужно остановить ввод больших чисел, вы можете добиться этого, используя событие onkeyup или onkeydown для изменения значения ввода.

Обновлена ​​скрипка с внесенными изменениями: https://jsfiddle.net/6pagfr2t/