Удалить элемент, когда он существует

Question

Удалить элемент, когда он существует

1

Я вернулся с моими вопросами по Javascript. Я работаю над проверкой формы, и я добавляю текст, чтобы проверить, было ли введено имя. Проблема, с которой я сталкиваюсь, - это если я не помещаю имя, но затем я это делаю, сообщение о том, что он не помещает имя, появляется с другим элементом и наоборот, но им нужно искать способ, чтобы он исчезал, когда другой элемент выбран. Есть ли способ предотвратить показ элемента при его присутствии? Я ценю, что вы, ребята/девушки, занимаете время из своего дня, чтобы помочь noob хаха. :)

Код:

var complete = document.getElementById('button');

complete.addEventListener('click', validate);

function validate() {

  var textBox = document.getElementById('name');
  var red = document.getElementById('nah');
  var green = document.getElementById('yah');

  if (textBox.value === '') {
    red.style.display = 'block';
  } else {
    green.style.display = 'block';
  }
}

#nah {
  display: none;
  color: red;
}

#yah {
  color: green;
  display: none;
}

button {
  display: block;
  margin-top: 50px;
  border: 0.1px solid red;
  background: red;
  color: white;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
}

<input type="text" id="name">

<p id="nah">Please Enter Name!</p>
<p id="yah">Thank you!</p>

<button id="button">Complete Form</button>

RogerFedFan 20 сен. 2017, в 21:38

Источник

0

Вы должны помнить, чтобы скрыть красный div при проверке (отображение: нет)
BMcV 20 сен. 2017, в 19:07

Теги:

javascript

2 ответа

2

Самый простой способ - просто скрыть другие сообщения во время проверки:

function validate() {

  var textBox = document.getElementById('name');
  var red = document.getElementById('nah');
  var green = document.getElementById('yah');

  if (textBox.value === '') {
    red.style.display = 'block';
    green.style.display = 'none';   //hide the other element
  } else {
    green.style.display = 'block';
    red.style.display = 'none';   //hide the other element
  }
}

Вы можете сделать это более сложным способом, используя атрибуты данных для контроля видимости, но это, вероятно, хороший старт.

Duncan Thacker 20 сен. 2017, в 16:14

0

Как можно это сделать? Если не возражаете, объясните.
RogerFedFan 20 сен. 2017, в 19:55
0

Вы можете иметь элемент контейнера с пользовательским атрибутом с именем data-valid , например: <div id="container" data-valid="true"></div> а затем использовать селекторы CSS для переключения видимости: #container[data-valid='true'] .green-message { display: block; }
Duncan Thacker 20 сен. 2017, в 21:54

Ещё вопросы

Вы должны помнить, чтобы скрыть красный div при проверке (отображение: нет)
Как можно это сделать? Если не возражаете, объясните.
Вы можете иметь элемент контейнера с пользовательским атрибутом с именем data-valid , например: <div id="container" data-valid="true"></div> а затем использовать селекторы CSS для переключения видимости: #container[data-valid='true'] .green-message { display: block; }

Barmar · Accepted Answer · 2017-09-20T17-25-00.000Z

Когда вы показываете одно сообщение, вам нужно скрыть другое.

var complete = document.getElementById('button');

complete.addEventListener('click', validate);

function validate() {

  var textBox = document.getElementById('name');
  var red = document.getElementById('nah');
  var green = document.getElementById('yah');

  if (textBox.value === '') {
    red.style.display = 'block';
    green.style.display = 'none';
  } else {
    green.style.display = 'block';
    red.style.display = 'none';
  }
}

#nah {
  display: none;
  color: red;
}

#yah {
  color: green;
  display: none;
}

button {
  display: block;
  margin-top: 50px;
  border: 0.1px solid red;
  background: red;
  color: white;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
}

<input type="text" id="name">

<p id="nah">Please Enter Name!</p>
<p id="yah">Thank you!</p>

<button id="button">Complete Form</button>