var wrappers = document.querySelectorAll('.wrapper'); for (var i = 0; i<wrappers.lenght; i++) { wrappers[i].onclick = function() { this.firstChild.style.display = 'none'; }; }; 
 .wrapper { width: 100px; height: 100px; border: 2px solid blue; display: inline-block; cursor:pointer; } 
 <div class="wrapper"> <div class="some">asdasd</div> </div> <div class="wrapper"> <div class="some">asdasd</div> </div> <div class="wrapper"> <div class="some">asdasd</div> </div> <div class="wrapper"> <div class="some">asdasd</div> </div>

Why this code does not work, the text should disappear by clicking on the block.

    1 answer 1

    Try firstElementChild , it takes exactly the first child element, not any child node.

    In addition, you incorrectly wrote length , the last letters are confused.

     var wrappers = document.querySelectorAll('.wrapper'); for (var i = 0; i<wrappers.length; i++) { wrappers[i].onclick = function() { this.firstElementChild.style.display = 'none'; }; }; 
     .wrapper { width: 100px; height: 100px; border: 2px solid blue; display: inline-block; cursor:pointer; } 
     <div class="wrapper"> <div class="some">asdasd</div> </div> <div class="wrapper"> <div class="some">asdasd</div> </div> <div class="wrapper"> <div class="some">asdasd</div> </div> <div class="wrapper"> <div class="some">asdasd</div> </div>

    • It did not help) There are no errors in the console either - uzi_no_uzi
    • one
      @uzi_no_uzi error in length, I added in response - Dmitry Polyanin
    • one
      @uzi_no_uzi if the answer solved your problem, you can mark it as an answer - Dmitry Polyanin