javascript - 使用 javascript 检查 div 内的 span 值

Question

我想检查 div 内的值是否不为空，以便我可以隐藏“标题”div。但我的 JavaScript 失败了。

注意:span 不应该有 id，只有 div。

 <div id="header">
      <label>This is a header</label>
    </div>
    <div id="myDiv">
        <label>My Label</label>
        <span>Dog</span>    
    </div>

Javascript:

 function hideHeaders(){

var myDiv = document.getElementById('myDiv');
var x = roadDiv.getElementsByTagName('span');

if(x.value == ""){ 
   document.getElementById('header').style.display = "none";
}

Answer 1

您的代码中需要进行一些更正。首先，getElementsByTagName 返回一个NodeList，因此您需要通过索引访问每个单独的项目，例如

  var x = document.getElementsByTagName('span')[0];

此外，roadDiv 未定义，您应该使用 document 或上面的父容器。

接下来，对于 span 元素，您需要使用 innerHTML，而不是 value

if (x.innerHTML == "") {

function hideHeaders() {

  var myDiv = document.getElementById('myDiv');
  var x = document.getElementsByTagName('span')[0];

  if (x.innerHTML == "") {
    document.getElementById('header').style.display = "none";
  }
}
hideHeaders();

<div id="header">
  <label>This is a header</label>
</div>
<div id="myDiv">
  <label>My Label</label>
  <span></span> 
</div>