@Alisa94

Как проверить поля ввода на нужное значение?

У меня есть такая проблема, после одной проверки на соответствие с условием и после изменения я больше не могу вернуться и заново проверить.
У меня есть список кнопок, которые содержатся в сайдбаре и имеют значение(value), которое соответствует их имени. В главном контейнере есть два поля для ввода и одна кнопка для сравнения. Мы не будем касаться функционала этой кнопки, здесь нас интересует только включение/выключение кнопки при определённых условиях.
Итак, пользователь наживает на произвольную кнопку из списка и значение этой кнопки, которое, как уже говорил, соответствует имени самой кнопки, передаётся в первое поле ввода. Пока что кнопка для сравнения имеет выключенное состояние. Затем пользователь наживает на любую кнопку из того же места и имя этой кнопки появляется во втором поле для ввода. Теперь кнопка сравнения включилась. Дальше пользователь решил, что он должен изменить первое поле на что-то другое простым редактированием этого поля и он просто удаляет оттуда текст и пишет что-то своё, которое не соответствует ничему из того списка, т.е. введённое пользователем имя в первом поле не существует среди кнопок из сайдбара. После всего этого кнопка для сравнения должна была выключиться, т.к. введённое в первом поле имя нету, но это кнопка продолжает быть активной.
Итак, мне нужно выключить эту кнопку и я не могу справиться с этим.
Другая проблема в том, что после редактирования имени в первом поле на что-то иное, если пользователь решит кликнуть по кнопкам на сайдбаре, чтобы изменить имя первого поля на существующее имя(или на другое), то изменения продолжат выполняться во втором поле. Т.е. после первой проверки условия я не могу вернуться назад и при каждом изменении проверить это условии, а мне нужно, чтобы каждое изменение проверялось.
Буду очень благодарен за помощь.

Я дам вам код pug, если будет необходимо, могу изменить её на js и html.

extends layout

mixin projectButton(objectKey)
  button.viewButton(type="button" value=objectKey !{objectKey} )

block append main
  div.container
    div.row
      div.col-md-6.offset-md-3
        div.form-group
          input.form-control#projectA(type="text" name="projectA")
    div.row
      div.col-md-6.offset-md-3
        div.form-group
          input.form-control#projectB(type="text" name="projectB")
    div.row
      div.col-md-6.offset-md-3
        div.form-group(style="text-align:right;")
          button.btn.btn-primary#v(type="button" disabled="disabled") Сравнить

block append sidebar

  for val in projectlist
    +projectButton(val.objectKey)

  script(type='text/javascript').
    const inputNameOne = document.getElementById('projectA');
    const inputNameTwo = document.getElementById('projectB');

    const buttons = document.querySelectorAll('.viewButton');

    const btnV = document.getElementById('v');

    buttons.forEach(btn => btn.onclick = () => {
      if (inputNameOne.value === '') {
        inputNameOne.value = btn.value
      } else if (inputNameOne.value !== btn.value) {
        inputNameTwo.value = btn.value;
      };

      if ((inputNameOne.value.length === 0) || (inputNameTwo.value.length === 0)) {
        return btnV.disabled = true;
      };
      if ((btnV.disabled = inputNameOne.value) && (btnV.disabled = inputNameTwo.value)) {
        if (inputNameOne.value !== inputNameTwo.value) {
          return btnV.disabled = false;
        }
      };
      if (inputNameOne.value !== btn.value) {
        btnV.disabled = true;
        return inputNameOne.value = btn.value;
      }
    })
  • Вопрос задан
  • 203 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы