Question

我回想起我的Javascript问题。我正在进行表单验证，并且我正在添加文本以检查是否输入了名称。我遇到的问题是，如果我没有输入名称，但我会这样做，不输入名称的消息会显示另一个元素，反之亦然，但我正在寻找一种方法来制作它当选择另一个元素时消失。是否有某种方法可以防止元素出现时出现？我很感谢你们这些人/女孩们抽出时间来帮助一个菜鸟哈哈。：）

代码：

＆＃13;

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';
  }
}

＆＃13;

#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;
}

＆＃13;

<input type="text" id="name">

<p id="nah">Please Enter Name!</p>
<p id="yah">Thank you!</p>

<button id="button">Complete Form</button>

＆＃13;

Answer 1

当您显示一条消息时，您需要隐藏另一条消息。

auto_test()

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;
}

Answer 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
  }
}

您可以使用数据属性以更复杂的方式来控制可见性，但这可能是一个良好的开端。

当一个元素存在时删除元素

2 个答案: