Javascript classList add hidden not working

以下は、DOMを介していくつかの要素を取得するコードスニペットです。私は、各検索された要素のclassListに "hidden"プロパティを追加するはずの単純なonclickをアタッチします。Javascript classList add hidden not working

HTML：

<body> 
     <h1 id="view-one-header">Exploring View 1</h1> 
     <img id ="dragonite" src="https://cdn.bulbagarden.net/upload/8/8b/149Dragonite.png" alt="Dragonite"> 
     <button id="toggle-view-two-btn">Toggle View 2</button> 
</body>

Javascriptを：

window.onload = pageLoad; 

function pageLoad() { 
    let viewOneHeader = document.getElementById("view-one-header"); 
    let dragoniteImg = document.getElementById("dragonite"); 
    let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn"); 
    toggleViewTwoBtn.onclick = changeToViewTwo; 

    function changeToViewTwo() { 
     viewOneHeader.classList.add("hidden"); 
     dragoniteImg.classList.add("hidden"); 
    }

ボタンがクリックされたときに、対応するビューが消えないので、私はこのスクリプトをデバッグしようとしています。それはしばらくして、私は問題を把握することができません。どんな助けもありがとう。

出典

2017-10-23 user3131097

してください、[編集]あなたの質問と[MCVE]提供。 – Xufox

あなたのコードはそのまま動作しています。 "hidden"クラスは、idが指定された要素に追加されます。「隠し」クラスを作成するには、cssを更新する必要があります。 – colecmc

私たちが手助けをするには、関連するHTMLとCSSを表示する必要があります。たとえば、 'toggleViewTwoBtn = document.getElementById（" toggle-view-two-btn "）;'がDOMに読み込まれる前に実行されている場合、 'toggleViewTwoBtn'はあなたが試みると' null'になります'.onclick'を割り当てます。 –

ここでは、クラス「hidden」のCSSを追加しました。 idが "toggle-view-two-btn"の要素をクリックすると、クラスが追加されます。

let viewOneHeader = document.getElementById("view-one-header"); 
 
let dragoniteImg = document.getElementById("dragonite"); 
 
let toggleViewTwoBtn = document.getElementById("toggle-view-two-btn"); 
 
toggleViewTwoBtn.onclick = changeToViewTwo; 
 

 
function changeToViewTwo() { 
 
    viewOneHeader.classList.add("hidden"); 
 
    dragoniteImg.classList.add("hidden"); 
 
}

.hidden { 
 
    display: none; 
 
}

<div id="view-one-header">view-one-header</div> 
 
<div id="dragonite">dragonite</div> 
 
<div id="toggle-view-two-btn">toggle-view-two-btn</div>

出典

2017-10-23 18:38:02 colecmc

もう一度、これは質問に答えません。それは作業コードを表示するだけです。私たちは、回答を提供するためにOPの状況について十分に知りません。 –

ありがとう！ CSSを追加することはやりました。 – user3131097

@ScottMarcus、あなたが質問された質問を読むと、あなたはキーワードが「消える」ことに気付くでしょう。それは何を参照していますか？ – colecmc

Javascript classList add hidden not working

答えて

関連する問題