jQueryではなくjavascriptでのイベントの書き方

Question

下記のようにボタン1またはボタン2を押下すると
コンテンツ全体を非表示にする場合、
jQueryではわかるのですが、javascriptではどのように書けばよいのでしょうか。
質問：
spanタグを直接選択するのではなく、wraper > inner > cont > span　という風にたどって選択する方法はこれであっていますでしょうか。
js本文に足りない記述はありますでしょうか。

<div id="wrapper">
  <div class="inner">
    <div class="cont"><span>ボタン1</span><span>ボタン2</span></div>
  </div>
</div>

#wrapper{
  background:#eee;
  width:300px;
  hei
}
#wrapper span{
 margin-left:3em;
 cursor:pointer;
}
.none{
  display:none;
}

var element = document.getElementById('wapper').getElementsByClassName('inner').getElementsByClassName('cont').getElementsByTagName('span');

var allContent = document.getElementById('wapper');

document.element.onclick = function() {
  allContent.classList.add('none');
}
```

Comments

[m.ts10806]

現在のコードにおける問題を「質問本文に」追記してください

[m.ts10806]

「うまくいかない」では他者にはなにも伝わりませんので。
それに「調べて書いた」だけでも何をもとに書いたのか誰にも伝わりません

[hentaiman]

素のjavascriptでもjQueryと同じように選択できるが・・・

[m.ts10806]

現在のコードにおける問題を追記してください。
「あってますか？」という聞き方だと「実行してみればわかります」という答えになります

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [].forEach.call(document.querySelectorAll('#wrapper span'),x=>{
    x.addEventListener('click',()=>{
      x.closest('#wrapper').style.display="none";
    });
  });
});
</script>
<div id="wrapper">
  <div class="inner">
    <div class="cont"><span>ボタン1</span><span>ボタン2</span></div>
  </div>
</div>

Comments

[退会済みユーザー]

'#wrapper span'よりは、'#wrapper .inner .cont span'の方が質問意図に近そうです。
現実的にはどうするのが賢いのか分かりませんけども…

[up24]

ありがとうございます。
大体わかりました。
それぞれの意味を調べます。

Answer 2

    var element = document.getElementById('wrapper').getElementsByClassName('inner')[0].getElementsByClassName('cont')[0].getElementsByTagName('span');
    var allContent = document.getElementById('wrapper');
    for( var i=0,l=element.length; l>i; i++ ) {
        element[i].onclick = function() {
            allContent.classList.add('none');
        }
    }

おかしかったところ

1. getElementsByClassNameはHTMLCollectionを返すので、[0]が必要

getElementsByIdとは違ってgetElementsByClassNameは複数の要素がヒットする可能性があるので、HTMLCollection(配列のようなもの)で結果が返ります。
2. "wapper" -> "wrapper"タイプミス
3. "document.element.onclick" -> "element.onclick"の間違い
さらに、elementはHTMLCollectionなので、そのままonclickをセットできない。
=>forでループを回して一個ずつ(ボタン1とボタン２)処理を行う必要ありです。

Comments

[up24]

より詳しく理解できそうです。
ありがとうございます。
タイプミスはお恥ずかしい。すみません。