2

Пишу интерактивную страничку бинарного поиска, где пользователь сам вводит значения границ массива, искомого значения и т.д. Нахожусь на стадии валидации поля искомого числа, чтобы оно не вываливалось за пределы массива. Логика проста, если число больше или меньше границ массива - выводится алерт с ошибкой и значение инпута сбрасывается до значения по умолчанию:

let num = document.querySelector('.main__input-number').value

if (num > max || num < min) {
    alert('Wrong number!\nCheck if it is included in the array interval and try again.');
    num = 1;
}

В таком случае, сброс значения инпута до единицы происходить не будет (непонятно почему), но если отказаться от переменной num, просто использовать селектор, то сброс происходит:

let num = document.querySelector('.main__input-number').value

if (num > max || num < min) {
    alert('Wrong number!\nCheck if it is included in the array interval and try again.');
    document.querySelector('.main__input-number').value = 1;
}

Помогите, пожалуйста, объяснив почему инпут не хочет принимать значение через переменную, ведь так код смотрится красивее и отказываться от такого способа не хочется. Заранее спасибо

11
  • .value - строка, что чревато множеством ошибок. 10 июл в 10:47
  • 1
    В первом варианте вы меняете локальную переменную. Внешний мир (DOM) об этом ничего не знает. Во втором варианте вы меняете DOM и пользователь видит это изменение. 10 июл в 10:49
  • @StanislavVolodarskiy, тип у инпута стоит "number", ошибок вроде не должно быть, если невозможно в импут ввести НЕчисло
    – pslncv
    10 июл в 10:50
  • 2
    Не вижу никаких чудес, все, вроде, логично...вы сбрасываете именно значение input-а, к нему и стоит обращаться...
    – Alexey
    10 июл в 10:51
  • Тип инпута не влияет на представление значения в программе. Это строка. 10 июл в 10:51

1 ответ 1

1

Так невозможно сделать, потому что сам язык это не позволяет.

Но есть обходной путь: создать функцию, а потом вызывать её:

let input = document.querySelector('.main__input-number')

function changeValue(value) {
    input.value = value;
}

if (+input.value > max || +input.value < min) {
    alert('Wrong number!\nCheck if it is included in the array interval and try again.');
    // 1 - значение, которое вам нужно
    changeValue(1);
}

Либо, можно вообще сделать так:

let input = document.querySelector('.main__input-number')

if (+input.value > max || +input.value < min) {
    alert('Wrong number!\nCheck if it is included in the array interval and try again.');
    // 1 - значение, которое вам нужно
    input.value = 1;
}

Как видите, всё просто и никаких "чудес" нет.

3

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.