Close current tab by a html button

I want to close the current tab of my program by a button which I created in HTML and gave him a click event so I want to close the tab in js by doing an onclick but when I click on my button nothing happens.

Here is my code:

<div class="modal-footer">
    <button class="btn btn-light" id="closebtn" onclick="closeBtnClicked"> Close </button>
    <button class="btn btn-primary">Save</button>
</div>

And this is my js function:

function closeBtnClicked(){
    window.close();
}

31 thoughts on “Close current tab by a html button”

  1. Try this: by just calling close and onclick is a function so change that to closeBtnClicked().

    function close_window() {
      if (confirm("Close Window?")) {
        close();
      }
    }
    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    
    <body>
    
    <a href="javascript:close_window();">close</a>
    
    </body>
    </html>
    Reply
  2. There are two problems with your code. The first and more obvious one is that your onclick attribute value is missing the () after the function. Because of this, your function never actually got called.

    However, when you fix this problem, you notice the other one: Calling the function window.close() in most modern browser will fail, if the window was not also opened by the same script (e.g. using the open() function).

    According to Mozilla this is a security precaution, although I don’t understand how a script closing its own tab could be exploited.

    Reply
  3. The onclick attribute must contain a function call, not the function name. Simply change onclick="closeBtnClicked" to onclick="closeBtnClicked()".

    See W3Schools for examples and a definition of the onclick attribute.

    Reply

Leave a Comment