Выберите Детский ByClassName Javascript

Question

У меня есть много дивы, как следующий рендеринг на той же странице:

<div class="contentUser"> 
    <div class="innerContent"> 
     Some data 
    </div> 

    <div class="contentButtonWrap"> 
     Some buttons 
    </div> 
</div> 

мне нужно, чтобы вызвать изменение стиля на «contentButtonWrap», когда «contentUser щёлкнули».

Я не знаю, как я могу выбрать дочерний элемент определенного имени класса. Обратите внимание, что количество элементов, которые могут быть отображены в «contentUser», изменяется от div (contentUser) до div. Но в «ContentUser» есть только один элемент «contentButtonWrap».

Это то, что у меня есть:

function avoidHover() { 
    var userDivs = document.getElementsByClassName('contentUser'); 
    [].forEach.call(userDivs, function(e){ 
     e.click = function(){ 

      var target = e.getElementsByClassName('contentButtonWrap'); 
      target[0].style.backgroundColor='green'; 
      }; 
    }); 
}; 

Answer 1

Вот мое взятие на него: http://jsfiddle.net/cdL51w2g/

function avoidHover() { 
    var userDivs = document.getElementsByClassName('contentUser'); 

    for(var i=0; i<userDivs.length; i++){ 
     userDivs[i].onclick = function(){ 
      var target = this.getElementsByClassName('contentButtonWrap'); 
      target[0].style.backgroundColor='green'; 
     }; 
    } 
}; 

Я изменил способ доступа детей в родительской div и использовали функцию onclick вместо click в вопросе.

Answer 2

"onclick" вместо "click". К сожалению об этом ... не

function avoidHover() { 
    var userDivs = document.getElementsByClassName('contentUser'); 
    [].forEach.call(userDivs, function(e){ 
     e.onclick = function(){ 

      var target = e.getElementsByClassName('contentButtonWrap'); 
      target[0].style.backgroundColor='green'; 
      }; 
    }); 
};