Question

HTML：

<label>First Name</label>
<input type="text" value="" id="FNAME">

JS：

var FNAME = document.getElementById('FNAME');

FNAME.addEventListener('input', function() {
  if (FNAME.value !== ''){
    alert('Field not empty! Value: '+ FNAME.value);
    document.getElementById('FNAME').previousSibling.style.visibility = "hidden";
  }
});

...给出错误：

TypeError: undefined is not an object (evaluating 'FNAME.previousSibling.style')

我做错了什么？

Answer 1

再次将previousSibling附加到previousSibling。它应该正确地定位标签。

  var FNAME = document.getElementById('FNAME');
  if (FNAME.value !== ''){
    var label = FNAME.previousSibling.previousSibling.style.visibility = "hidden";
  }

Answer 2

要回答有关错误的问题，previousSibling的{{1}}是文本节点（input和label之间的空白区域）。并且文本节点没有样式属性。

现在，据我了解你的问题，你想在某些条件下隐藏标签。

我会改变你的input并使用一些更现代的js api来访问这些元素。

html

这里我将<label for="FNAME">First Name</label> <input type="text" value="" id="FNAME">属性添加到标签中。

for

希望这有帮助。

Answer 3

输入元素的前一个兄弟是它的文本节点。

因此，您应该致电FNAME.previousSibling.previousSibling来访问该标签。

This问题可以为您提供更多信息。

在Javascript中隐藏prevoussibling

3 个答案: