javascripthtmlfunctionaddeventlistenergetelementbyid

Why is the chat window opening before I click open chat?

So, initally, I had no issues. It seemed to be working fine. I load the script and it was giving just the 'open chat' option.

Now, it loads the whole chat window already open, but not the content page of the chat. I have to click 'exit chat' and 'open chat' for it to actually open up the content.

I don't want the content window to even open until I click 'open chat'.

(for the sake of ease, I left the css as a style tag in the webpage for now. Typically, I have a stylesheet href in the head)

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
#forumWindow {
    padding: 10px;
    height: 350px;
    width: 250px;
    opacity:0.9;
    filter:alpha(opacity=50);
    -moz-border-radius: 20px 20px 20px 20px; 
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 1px #000 dotted
    z-index: 1000;
        }
    .button { background:url('http://www.haikimura.com/images/b.png');
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em; 
    z-index:4; 
    border-radius: 1em; 
    border:1px dotted #FFF0F5; 
    font-family: Garamond; 
    color: #fff; 
    font-size: 15px; }

     .box { 
    position: fixed; 
    bottom: 5px; 
    right: 40px; 
    width: 250px; 
    padding: 0px; 
    text-align: center; 
    cursor: default;
    background:url('http://www.haikimura.com/images/b.png') repeat; opacity:.80; 
    border:1px dotted #FFF0F5; 
    color: #fff; 
    font-family: Garamond; 
    font-size: 15px; 
    border-radius:5px; }

    .prettyFrame { 
    width: 100%; 
    height: 90%; 
    -moz-border-radius: 20px 20px 20px 20px; 
    -webkit-border-radius: 20px 20px 20px 20px; 
    border: none; }
</style>
    </head>
    <body>

    <button id="openForumBtn" class="box">open chat</button>
   
   
    <div id="overlay"></div>
    <div id="forumWindow" class="box">
    <iframe id="forumFrame" src="" class="prettyFrame"></iframe>
    <button id="closeForumBtn" class="button">exit chat</button>
    </div> 

<script>
document.getElementById('openForumBtn').addEventListener('click', function() {
    document.getElementById('forumWindow').style.display = 'block';
    document.getElementById('forumFrame').src = 'https://www.haikimura.com/'; // Replace with your forum URL
    });

    document.getElementById('closeForumBtn').addEventListener('click', function () {
    document.getElementById('forumWindow').style.display = 'none';
    document.getElementById('forumFrame').src = '';
    }); 
</script>

    </body>
    </html>

css

#forumWindow {
    padding: 10px;
    height: 350px;
    width: 250px;
    opacity:0.9;
    filter:alpha(opacity=50);
    -moz-border-radius: 20px 20px 20px 20px; 
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 1px #000 dotted
    z-index: 1000;
        }
    .button { background:url('http://www.haikimura.com/images/b.png');
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em; 
    z-index:4; 
    border-radius: 1em; 
    border:1px dotted #FFF0F5; 
    font-family: Garamond; 
    color: #fff; 
    font-size: 15px; }

     .box { 
    position: fixed; 
    bottom: 5px; 
    right: 40px; 
    width: 250px; 
    padding: 0px; 
    text-align: center; 
    cursor: default;
    background:url('http://www.haikimura.com/images/b.png') repeat; opacity:.80; 
    border:1px dotted #FFF0F5; 
    color: #fff; 
    font-family: Garamond; 
    font-size: 15px; 
    border-radius:5px; }

    .prettyFrame { 
    width: 100%; 
    height: 90%; 
    -moz-border-radius: 20px 20px 20px 20px; 
    -webkit-border-radius: 20px 20px 20px 20px; 
    border: none; }

js

document.getElementById('openForumBtn').addEventListener('click', function() {
    document.getElementById('forumWindow').style.display = 'block';
    document.getElementById('forumFrame').src = 'https://www.haikimura.com/'; 
    });

    document.getElementById('closeForumBtn').addEventListener('click', function () {
    document.getElementById('forumWindow').style.display = 'none';
    document.getElementById('forumFrame').src = '';
    });
Solution

  • Add display: none to #forumWindow as an initial value would solve your problem

    #forumWindow {
 padding: 10px;
 height: 350px;
 width: 250px;
 opacity:0.9;
 filter:alpha(opacity=50);
 -moz-border-radius: 20px 20px 20px 20px; 
 -webkit-border-radius: 20px 20px 20px 20px;
 border: 1px #000 dotted
 z-index: 1000;
 display: none; // here
}