js--ショー隠された機能

基本的な表示隠された機能を使用して書かれたJS。最初の接触jsの友人のためにいくつかの助けとなることがあり

 

レッドゾーンを非表示にするボタンをクリックし、表示テキストにボタンが表示されることができます。コードは以下の通りです

<！DOCTYPE HTML >  <！ - 文档声明- > 
< HTML LANG = "EN" >  <！ - 根节点- > 
   < 頭> <！ - 树枝节点- > <！ - 父节点- > 
    < メタ文字セット= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP-当量= "X-UA-互換性のある" コンテンツ= "すなわち=縁」> 
    <> <！ - 子节点- > 
   </ ヘッド> 
   < スタイル> 
       #box { 
           幅：200pxの。
           高さ：200pxの。
           背景色：赤。
       } 
       .hidden { 
           表示：なし。
       } 
       .SHOW { 
           表示：ブロック。
       } 
   </ スタイル> 
   < ボディ> 
        < 入力ID= "BTN" タイプ= "ボタン" 値= "隐藏" > 
        < DIV ID = "ボックス" > </ DIV >
        
        ESlintクエリ指定ツールコード
        < スクリプト> 
        // 1つの取得要素。
        VAR BTN = のdocument.getElementById（' BTN ' ）;
         VAR ボックス= のdocument.getElementById（' ボックス' ）;
         VAR isshow =  trueに;
         // 2ボタンのクリックイベント・レジスタに
        btn.onclick =  機能を（）{
             // これはボックスに隠されている
            IF （isshow）{
             // 。隠された3 DIV制御表示
             box.classNameを= ' 隠されました';
              // 変更]ボタンのテキスト
             btn.value =  ' 表示' ;
             isshow =  偽;
            } 他{
              // 隠れ3 DIV制御表示。
             box.className = 「表示」;
              // 変更ボタンテキスト
             // イベントハンドラでthis--イベントソースオブジェクトのトリガー・イベント
             btn.value =  「隠されました」。
             isshow =  真;
            }     
        }。
        // この関数- >オブジェクトウィンドウ
        // 関数fn（）{ 
        //      はconsole.log（本）
        // } 
        // Fnが（）; 
        // このプロセスは、 - >メソッドは、オブジェクトを呼び出すことです
        // VAR OBJ = { 
        //      名前= 'ZS'、
        //      言う：機能（）{ 
        //      はconsole.log（この）; 
        //      } 
        // } 
        // obj.say（）; 
        // コンストラクタこの- >現在のオブジェクト
         // このイベントハンドラ- >トリガイベントイベントソースオブジェクト
       
        </ スクリプト> 
    </ ボディ> 
</ HTML >