使用JavaScript检查div内span的值

Question

我想检查div内的值是否不为空，以便隐藏“ header” 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> 

Answer 2

最好使用===而不是==，这不会对这个代码块有很大的影响，而只是将来将您的代码样式中的任何问题元素化，并消除两个相等的参数导致的奇怪错误，但是不同类型的。