Divをクリックすると別のDivが作成されます

divの1つをクリックし、visibility = hiddenからvisibility = visibleに切り替えるプロンプトボックスを作成しようとしています。これはこれまでの私のコードであり、なぜ動作しないのかわかりません。Divをクリックすると別のDivが作成されます

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="author" content="C.K."> 
     <title></title> 
     <link rel="stylesheet" href="./css/main.css"> 
     <script type="text/js"> 
      document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble"; 
     </script> 
    </head> 
    <body> 
     <div id="selector"> 
      SELECTOR 
     </div> 
     <div id="addpanel"> 
      <table id="add"> 
       <tr> 
        <td id="plus">+</td> 
       </tr> 
       <tr> 
        <td>Add New Item</td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

出典

2017-07-18 cobo16

をあなたはJSの実行時に存在しない要素にハンドラをアタッチしています。 –

はこれをチェックしてください：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="author" content="C.K."> 
     <title></title> 
    <link rel="stylesheet" href="./css/main.css"> 
</head> 
<body> 
    <div id="selector"> 
     SELECTOR 
    </div> 
    <div id="addpanel"> 
     <table id="add"> 
      <tr> 
       <td id="plus">+</td> 
      </tr> 
      <tr> 
       <td>Add New Item</td> 
      </tr> 
     </table> 
    </div> 
    <script type="text/javascript"> 
    document.getElementById("selector").style.visibility = "hidden"; 
    document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";}; 
    </script> 
</body>

出典

2017-07-18 01:35:38

これは素晴らしい機能でした！私はそのような方法の背後にある理論的根拠を尋ねるかもしれませんか？ – cobo16

最初のスクリプトは常にHTMLの後ろにあるので、要素を見つけることができます。第2に、onclickプロパティをjavascript関数として設定するので、実際にはそのステートメントが実行されます。そうだと思います。 –

HTMLは上から下に解析されます。あなたのスクリプトは、パーサが処理するHTMLをさらに生成する場合（例えば、document.write）、すぐに実行されます。 document.getElementById("addpanel").onclickの時点では、HTMLパーサがまだ到達していないため、addpanelは存在しません。

apppanel要素の終了タグの後にブロック<script>を移動してください。

また、onclickは関数である必要があります。それは次のようになります

document.getElementById("addpanel").onclick = function() { 
    document.getElementById("selector").style.visibility = "visible" 
}

クイック実施例：https://jsfiddle.net/m2q6ubuv/

出典

2017-07-18 01:25:58

typo 'visble' .... – ewwink

私はこれらの編集をしましたが、それでもまだ反応しません – cobo16

@ewwink haha私はちょうど質問からそれをコピーしました、ありがとう！ –

この

関数ショー（）{ document.getElmenetById（ 'セレクタ'）を試しstyle.visibility =「見えます。 '; }

は、それからちょうどあなたがボタンになりたいタグの属性としてonclick='show()'を置きます。さらに、</body>タグの最初の部分だけJavaScriptをページの最後に配置する必要があります。

出典

2017-07-18 01:32:03

覚えておいてください：divを表示できるようになりますが、あなたはより複雑なif/else JavaScript関数を使用する必要があります。 –

Divをクリックすると別のDivが作成されます

答えて

関連する問題