onclick 功能在 IE 中不起作用，但在其他浏览器上工作正常

Question

I need to open a div on click of an image, so for this I simply created an onclick event for a function within image tag. When I click on the image it shows that 'the function is undefined' . The same code works fine on other browsers but not on IE. I really need help on this. Tried multiple things with reference to the similar questions asked here but nothing seems working. Any help would be appreciated.

Below is the code I tried

HTML

<div class="chat-bubble" id="chat-bubble">
   <div id="chat-header">
      <img src="images/Chatbot-icon.png" id="chat-icon" /><span> YODA </span
      ><img
         src="images/close.png"
         id="close-icon"
         onclick="closeFunction()"
      />
   </div>
   <div id="webchat" role="main" class="webchat"></div>
   <div id="botchat" role="main" class="webchat"></div>
   <img
      src="images/Chatbot-icon.png"
      id="chatBubble"
      onClick="javascript: myFunction();"
   /><img
      src="images/Chatbot-icon.png"
      id="Bubble"
      onmousedown="myChat();"
   />
</div>

Javascript

function myChat() {
   var a = document.getElementById("botchat");

   var b = document.getElementById("chat-header");

   var c = document.getElementById("body");
   document.getElementById("Bubble").style.display = "none";
   if (a.style.display == "block") {
      a.style.display = "none";
   } else {
      a.style.display = "block";
   }
   if (b.style.display == "block") {
      b.style.display = "none";
   } else {
      b.style.display = "block";
   }
   c.style.height = "100vh";
   c.style.overflowY = "hidden";
}

Answer 1

After formatting your code I have found that you have missed myFunction() and closeFunction() in your code.

Paste your code for those functions.

 function myChat() { var a = document.getElementById("botchat"); var b = document.getElementById("chat-header"); var c = document.getElementById("body"); document.getElementById("Bubble").style.display = "none"; if (a.style.display == "block") { a.style.display = "none"; } else { a.style.display = "block"; } if (b.style.display == "block") { b.style.display = "none"; } else { b.style.display = "block"; } c.style.height = "100vh"; c.style.overflowY = "hidden"; }

 <div class="chat-bubble" id="chat-bubble"> <div id="chat-header"> <img src="images/Chatbot-icon.png" id="chat-icon"> <span> YODA </ span> <img src="images/close.png" id="close-icon" onClick="closeFunction();"> </div> <div id="webchat" role="main" class="webchat"></div> <div id="botchat" role="main" class="webchat"></div> <img src="images/Chatbot-icon.png" id="chatBubble" onClick="myFunction();"> <img src="images/Chatbot-icon.png" id="Bubble" onmousedown="myChat();"> </div>