无法提醒第二条警报消息

Question

I'm writing an HTML code where in there is a button, once I click that button, there should be 2 alerts to be shown from JS and here is my code.

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:

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");
}

Here when I click the Chat button, alert("Hi"); is being alerted. but when I comment out the below part.

  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"; 

I can see even alert("2d alert") . This is really confusing. P lease let me know where I am going wrong and how can I fix this.

Here is the working fiddle. https://jsfiddle.net/8kpxwroa/

Thanks

Answer 1

The second alert is not working because your javascript code is breaking at:

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

In your fiddle , if you check the console you will find this

This is because document cant find chatbox id in your code. So either remove this line

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

or just place a element in your html having chatbox id

Answer 2

This is causing error

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

in your HTML you dont have any tag with "chatbox" id. so when it try to execute getting "Cannot read property 'style' of null" check console.

so try to add "chatbox" id or remove it.

Answer 3

I can see even alert("2d alert"). This is really confusing. P lease let me know where I am going wrong and how can I fix this.

Based on source-code you have shared, you don't have an element with id chatbox

So , document.getElementById("chatbox") returns null and you are getting an error in your browser's console while executing next line

e.style.margin = "0"; 

Since e is null, JS engine will give an error and next statement ( alert ) will not be executed.

Looks like you want to hide the chatheader (updated fiddle )

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

Answer 4

Your HTML code has no id with name chatbox . So replace it with id chat

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

become

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

See below URL : -

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