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

160
08 декабря 2019, 06:50

У меня есть такая проблема, после одной проверки на соответствие с условием и после изменения я больше не могу вернуться и заново проверить. У меня есть список кнопок, которые содержатся в сайдбаре и имеют значение(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;
      }
    })
READ ALSO
Как синхронно загрузить статику в nuxt?

Как синхронно загрузить статику в nuxt?

Пытаюсь загрузить статику для nuxt приложенияЕсть файл shakal

147
Таймер обратного отсчета на js

Таймер обратного отсчета на js

Нашел такой код таймера на js:

137
Как правильно разложить if условия

Как правильно разложить if условия

Тут такой код, в котором несколько условий, они понятно накладываютсяСмотрел про несколько условий if, но в данном случае выходит не то

139