2番目のアラートメッセージに警告することができません

Question

ボタンがクリックされると、JSから表示される2つのアラートが表示され、ここに自分のコードが表示されます。

HTML：

<button id="chat" class="animated-chat tada" onclick="loadChatbox()" style="position: absolute; bottom: 90px; right: 490px;width: 80px; height: 30px; font-size:25px">Chat</button> 
<div class="chatHeader"> 
    <span class="chat-text" style="text-align: center;">Chat with Care!!</span> 
    <div id="close-chat" class="close">&times;</div> 
    <div id="minim-chat" onclick="minimChatbox()"> 
    <span class="minim-button">&minus;</span> 
    </div> 
    <div id="maxi-chat" onclick="loadChatbox()"> 
    <span class="maxi-button">&plus;</span> 
    </div> 
</div> 

Javascriptを：私はChatボタンをクリックしてくださいここで

function loadChatbox() { 
    alert("Hi"); 
    alertAgain(); 
} 

function alertAgain() { 
    var e = document.getElementById("minim-chat"); 
    e.style.display = "block"; 
    var e = document.getElementById("maxi-chat"); 
    e.style.display = "none"; 
    var e = document.getElementById("chatbox"); 
    e.style.margin = "0"; 
    alert("2nd alert"); 
} 

は、alert("Hi");が警告されています。しかし、私は以下の部分をコメントアウトします。

var e = document.getElementById("minim-chat"); 
    e.style.display = "block"; 
    var e = document.getElementById("maxi-chat"); 
    e.style.display = "none"; 
    var e = document.getElementById("chatbox"); 
    e.style.margin = "0"; 

さらに見るとalert("2d alert")です。これは本当に混乱しています。私が間違っている場所を教えてください。どうしたらいいですか？

ここでは動作中のフィドルです。私も、アラート（ "2Dアラート"）を参照することができますhttps://jsfiddle.net/8kpxwroa/

おかげ

Answer 1

あなたのjavascriptのコードがで破壊されたため、2番目の警告が働いていない - ：だから

var e = document.getElementById("chatbox"); 

が

var e = document.getElementById("chat"); 

は、URLの下を参照してくださいになっID チャットでそれを置き換えます：

あなたのfiddleで

コンソールをチェックすると、ドキュメントがあなたのコード内でchatbox IDを見つける傾けるためです。この

があります。だから、

var e = document.getElementById("chatbox"); 

か、単にchatbox ID

Answer 2

。これは本当に混乱しています。私が間違っている場所を教えてください。どうしたらいいですか？実行中にあなたが共有しているソースコードに基づいて

、あなたはIDchatbox

ので、document.getElementById("chatbox")戻りnull、あなたのブラウザのコンソールでエラーになっているとの要素を持っていません次の行

e.style.margin = "0"; 

eがnullであるので、JSエンジンは（エラーと次のステートメントを提供します）は実行されません。

あなたはchatheader（fiddle更新）を非表示にするように見える

var e = document.querySelector(".chatHeader"); 
e.style.margin = "0"; 

Answer 3

これは、あなたが "chatbox" IDを持つ任意のタグを持っていけない、あなたのHTMLにエラー

var e = document.getElementById("chatbox"); 
e.style.margin = "0"; 

を引き起こしています。それで、 "nullのプロパティ 'スタイル'を読み込めませんでした。

「チャットボックス」IDを追加するか、削除してみてください。

Answer 4

あなたのHTMLコードには、チャットボックスのIDはありません。

https://jsfiddle.net/8kpxwroa/14/