Tips for shutting down an HTML webpage with the help of JavaScript

Recently, I've been working on a project to implement a feature that automatically closes the website when an incorrect password is entered. However, I am fairly new to JavaScript and still in the early stages of learning.

Below is the code snippet I have been experimenting with:

<!DOCTYPE html>
<html id="web" lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MySite</title>
    <script>
        var web = document.getElementById("web");
        var password = "BigDips12";
        alert("Hey, For security messures and to make sure you");
        var security = prompt("Please enter the password here:");
        if (security === password) {
            alert('Welcome!')
        } else {
            alert('Password is wrong! The program will close itself now..')

            function closeWin() {
                web.close();
            }
        }
    </script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

I could really use some guidance on this. Please help!

Answer №1

To exit the browser tab, simply use:

window.close();

Remember to actually call the function as well.

<!DOCTYPE html>
<html id="web" lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MySite</title>
  <script>
  function closeWin() {
        window.close();
      }
    var web = document.getElementById("web");
    var password = "BigDips12";
    alert("Hey, For security messures and to make sure you are truly not a robot ...");
    var security = prompt("Please enter the password here:");
    if (security === password) {
      alert('Welcome!')
    } else {
      alert('Password is wrong! The program will close itself now..')
   closeWin()
      
    }
  </script>
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS hover effect not working while mouse is in motion

As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps r ...

Recognizing JavaScript in Intellij IDEA within a script tag that does not specify the type as "text/javascript"

Using the MathJax javascript library has presented a challenge for me. Whenever I make changes to the MathJax configuration, I encounter issues because it is written in javascript but its type is labeled as "text/x-mathjax-config". This causes Intellij Ide ...

Is there a way to keep the spotlight/shadow position fixed in relation to the horizontal center, regardless of the zoom level?

After working on the following code snippet, I've managed to keep the spotlight centered horizontally, except when the zoom factor is too high. This means that when I zoom in, the spot light no longer remains centered in the horizontal view port. It& ...

Switch back JSON in php script

After receiving a JSON object with an unspecified number of key/value pairs, I need to send it from my $.ajax function to a PHP script. The PHP script must then revert the JSON object and send it back to jQuery. {"First name": "John", "Contact": "2323",.. ...

Tips for resolving the issue of CSS blocks disappearing when designing a webpage

When creating a responsive web page, the child block "overflows" from the parent block. This causes the entire page to shift to the left and an empty bar appears on the right side, moving all the content. I need to ensure that all content is positioned cor ...

I am encountering a situation in which the controller file is returning empty data when logging the contents of req

User Model const mongoose = require("mongoose"); const userSchema = mongoose.Schema( { name: { type: String, required: true }, email: { type: String, unique: true, required: true }, password: { type: String, required: true }, pic: { ...

Is it possible to create a hyperlink on the second page that directs to the first page and triggers a specific JavaScript function on the first page?

Working with a former colleague's code in C#, asp.net MVC, Telerik/Kendo controls. I am trying to navigate to a specific section on a page from another page that uses tabs/sections with links at the top of the page to toggle visibility based on the se ...

jQuery not functioning properly when attempting to add values from two input boxes within multiple input fields

I am facing an issue with a form on my website that contains input fields as shown below. I am trying to add two input boxes to calculate the values of the third input box, but it is only working correctly for the first set and not for the rest. How can ...

Ensuring data integrity within table rows using Angular to validate inputs

I am using a library called angular-tablesort to generate tables on my webpage. Each row in the table is editable, so when editMode is enabled, I display input fields in each column of the row. Some of these input fields are required, and I want to indica ...

Unexpected database query result in Node.js

In my newuser.js file for a node.js environment with a mongodb database managed through mongoose, I have the following code: //newuser.js //This code is responsible for creating new user documents in the database and requires a GET parameter along with a ...

Can't access innerText in Firefox

This is the code snippet I'm having trouble with: <div id="code">My program<br />It is here!</div> <script type="text/javascript"> var program=document.getElementById('code'); ShowLMCButton(program.innerText); </s ...

Leveraging an HTML interface in conjunction with a node.js application

My objective is to implement JavaScript on the server side. To achieve this, I have decided to use node.js as it seems like the most logical solution. While I am quite familiar with node.js from working on applications, I now need to utilize it for server- ...

The image is non-adjustable to different screen sizes

Currently, I am in the process of revamping a friend's website using Next.js and Tailwind. However, I've encountered a challenge with the background image specifically on iPhones. While it appears fine on browsers like Chrome and Safari as well a ...

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

What could be causing the AJAX call to not reach the action method in MVC?

[![ajax call issue][1]][1]I'm currently working on an assignment and encountering a problem where the ajax call is not hitting the action method. I've debugged it and confirmed that it's not reaching the action method. Here is the code snipp ...

Choose the element excluding a particular child

My issue is: I have a div with multiple children and I am trying to figure out how to exclude a specific element that is a child of the previously selected element. I attempted using the :not(selectedElement) selector as well as the .not(selectedElement) ...

Vanilla JS causing event to fire repeatedly

My code is written in Vanilla JS and I've encountered an issue with dynamically generated content. Each click on the dynamic content returns a different value than expected: First click: 1 Second click: 3 Third click: 6 Fourth click: 10 But it sh ...

Customize the font color in Material UI to make it uniquely yours

How can I customize the default Text Color in my Material UI Theme? Using primary, secondary, and error settings are effective const styles = { a: 'red', b: 'green', ... }; createMuiTheme({ palette: { primary: { ...

What is the process for searching a specific column in a Vuetify v-data-table that is not included in the headers?

Header for Product Data: headers: [ { text: "Product Name", value: "name" }, { text: "Quantity", value: "quantity" }, { text: "Price", value: "price" }, { text: "Orders", value: &quo ...

What is the best approach to updating a single item within a list using React Context?

React context is great, but I feel like there's something missing in my understanding of it. Let's say I have a list of todos and its corresponding provider set up like this: const Home = () => ( <div className="container"> <T ...