これがなぜ機能しないのかわからない

Question

<div class="button button1" onclick="toggleClass();">Stay Updated</div> 

    <script> 
     function toggleClass(){ 
      if(className == "button button1"){ 
        className = "info"; 
      } else { 
        className = "button button 1"; 
} 

    </script> 

divをクリックするとdivのクラスを変更しようとしています。 divは、別のdivクラスで置き換えられるボタンのように動作するように意図されています。これは今までの私のコーディングです。助けてください。前もって感謝します。

Answer 1

コードにいくつかの問題があります。まず、if/elseステートメントに閉じ括弧}がありません。エラーを見るためにあなたのコンソール、F12を確認してください：コメントで上述したよう

Uncaught SyntaxError: Unexpected end of input

第二に、classNameが自動的に存在せず、要素のクラスを変更しません。 classNameは、DOMオブジェクトのプロパティです。これを正しく取得して設定するには、クリックされた要素を取得してclassNameプロパティを参照する必要があります。

しかし、これを行うには、クリックした要素を取得する必要があります。

onclick="toggleClass(event);" 

をし、あなたの関数toggleClassでイベントオブジェクトを参照：これを行うには、あなたのインラインクリックハンドラにeventパラメータを追加eventオブジェクトのtargetプロパティがクリックを見つけること

function toggleClass(evt) { 

使用変数に保存してください：

var btn = evt.target; 

最後に、参考文献関数内にあるclassNameすべての参照の代わりにを使用してください。

DEMO： `className`が自動的にdivタグのクラスを変更しないという変数を割り当て

function toggleClass(evt) { 
 
    var btn = evt.target; 
 
    
 
    if(btn.className == "button button1") { 
 
     btn.className = "info"; 
 
    } else { 
 
     btn.className = "button button1"; 
 
    } 
 
}

div { 
 
    color: #fff; 
 
} 
 
div.button.button1 { 
 
    background: blue; 
 
} 
 
div.info { 
 
    background: green; 
 
}

<div class="button button1" onclick="toggleClass(event);">Stay Updated</div>