Javascript code that ensures a popup only appears one time

As I create a static website without server-side functionality, my options are limited to HTML, CSS, and a few scripts.

Incorporated into each page is a popup script that I designed using JavaScript:


b = false;
if (!b) {
    window.accept();
}

function accept() {
    var r = confirm('By clicking you are ready to accept the condition');
    if (r == true) {
        x = "You pressed OK!";
        b = true;
    } else {
        window.location = "http://google.com";
    }
    document.getElementById("demo").innerHTML = x;
}

My aim is for this popup to only appear once, so I've implemented a boolean variable that should change value after the user clicks OK. However, the popup continues to display despite my efforts.

javascripthtmlcsspopup

Answer №1

I suggest utilizing cookies to track whether the alert message has already been shown. For a comprehensive guide on how to implement this method, please refer to the following link: http://www.example.com/js_cookies

Answer №2

When it comes to storing information, I would suggest utilizing local storage instead of cookies. Many individuals disable cookies due to security reasons. If you are concerned about users with local/session storage disabled, you can implement a solution like Modernizr to detect this and provide an alternative.

Upon page load (using checkState as the storage variable to hold information):

 var checkState = localStorage.getItem('checkState');
    if(checkState == "true") { 
    //code for accepted conditions
    } else {
    //code for not accepted condition
};

When the "accept" button is clicked:

localStorage.setItem('checkState', 'true');

Keep in mind that local storage has a longer persistence compared to session storage, making it a preferred choice. However, both types allow you to track acceptance across different page loads without relying on server/network resources like cookies. It's important to note that local and session storage are not completely secure and should not be used for storing sensitive information such as passwords.

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

Submitting a form with JQuery and Ajax technology

I am encountering an issue where I need to submit a form within Ajax and I keep getting a 'form.submit is not a function' error in jQuery. $("#form").validate({ // Define validation rules rules: { type: "required", group ...

javascriptjqueryajaxforms

The color attribute enhances the appearance with a colored border specifically designed for Chrome users

Starting off, I appreciate the border that Chrome applies to my inputs. However, I am facing an issue with the textarea element. The problem is that the textarea uses the color attribute not only for coloring the text but also as the border color. Here is ...

cssgoogle-chrome

vue-dropzone fails to create thumbnails when a file is added

I am facing an issue where I want to upload files that are already stored on my server to the Dropzone. Despite searching extensively through both vue-dropzone and regular dropzone documentation, as well as various GitHub issues for solutions, I have not b ...

javascriptvue.jsdropzone.js

Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle. The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug ...

javascripthtmlcssgoogle-chrome

javascript exchange the content when clicking on a hyperlink

I'm encountering a bit of a challenge with this task... My javascript skills are a bit rusty, and I can't seem to pinpoint what's going wrong. My goal is to have a navbar that disappears when a user clicks on a small arrow, revealing a seco ...

javascripttextonclickswap

What is the process of incorporating external links into an angular application?

Attempting to embed an external URL within my Angular app using an iframe has resulted in the following issue: https://i.sstatic.net/liSmX.png The error message reads as follows: https://i.sstatic.net/u9GWw.png Below is the template where I am trying t ...

javascriptangular

Looping through the ajax data to populate ion-item elements

I am currently working on a loop that retrieves user IDs, names, etc. from a JSON file. I am trying to display this data in a list view within an Ionic framework. When I simply use direct alerts in JavaScript, the users are displayed correctly, but when I ...

javascriptjqueryangularjsajaxionic-framework

Creating dynamic images in Node.js using JavaScript without relying on HTML5 canvas

Hello everyone, I'm excited to be posting my first question on stackoverflow! Hey there, it's wabsol. I've been diving into the world of nodejs and loving every minute of it. I'm interested in creating a window and/or drawing an image ...

javascriptnode.jsimage2drendering

Interacting with a C# Web Service Using JQuery

I've set up a JSON web service in C# and I'm working on creating a custom HTML page to interact with it. http://localhost:25524/DBService.svc/json/db=TestDB/query=none When I input this URL into my browser, I expect to receive JSON formatted da ...

c#javascriptjqueryjsonwcf

Use a boolean value to determine the styling of multiple items simultaneously

I'm currently attempting to modify the appearance of the bars in each area (a total of 12), so that a value of 1 equates to true (displayed as green) and a value of 0 equates to false (displayed as red). This will dynamically change the color of each ...

javascripthtmlcss

CSS - Mysterious Gaps Found in Div Block

Below is the code snippet I am currently working with: html { height: 100%; overflow: hidden; } body { height: 100%; color: #bdc3c7; font-family: Montserrat; background-color: #3E4651; } .nav { ...

htmlcss

Error message in Material-UI TextField not displaying when state is updated using Object.assign technique

Currently, I am facing an issue with validating a login form and displaying errors dynamically. These errors are passed as props from the child component. The problem arises when I set the errors object using Object.assign - the errorText does not show up ...

javascriptreactjsmaterial-ui

Issues with React Native imports not functioning properly following recent upgrade

Hey there, I’ve been tasked with updating an old React-Native iOS project from version 0.25.1 to 0.48.0. However, I’m encountering several compiler issues and struggling to navigate through the code updates. The project includes an index.ios.js file s ...

javascriptiosreactjsreact-nativereact-native-ios

X-Ray Rendering in Three.js and Webgl

Looking to create an x-ray effect in three.js / webgl. Something like this: UPDATE I am seeking help on how to achieve a real-time render with the x-ray effect, instead of just a static image. This can be accomplished using shaders that modify density i ...

javascripthtml3dthree.jswebgl

The HTML view is unable to display the CSS style due to a MIME-type error

I have recently developed a very simple Express app that is supposed to display a single view called home.html from the view directory. Although the home.html file is being shown, none of the CSS styles I added seem to be loading. The console is throwing t ...

javascriptnode.jsexpress

ASP.Net & Ajax Fusion Login Interface

I am encountering an issue while creating a login page with HTML, AJAX, and ASP.NET. The data is being passed to the AJAX function successfully, but when I debug the ASP page, the username and password are showing up as NULL. The purpose of the code is to ...

javascriptasp.nethtmlajaxauthentication

"Jest test.each is throwing errors due to improper data types

Currently, I am utilizing Jest#test.each to execute some unit tests. Below is the code snippet: const invalidTestCases = [ [null, TypeError], [undefined, TypeError], [false, TypeError], [true, TypeError], ]; describe('normalizeNames', ...

javascriptangulartypescriptjestjsts-jest

Press the Instagram Follow Buttons by utilizing Selenium with Java

click here for image description Hello, I am currently working on automating the process of clicking follow buttons using Java. However, I'm encountering difficulties when trying to use JavascriptExecutor within a for loop. Below is the code snippet ...

javacssseleniumxpath

Is it possible to connect to a Node server from outside the network if the application is only listening on 'localhost'?

When utilizing the Express framework and we implement app.listen(port), the app will be located at localhost:port/ On a local machine, it is clear how to access this address using a local browser running on the same machine. Even clients within the same n ...

javascriptnode.jsexpressherokudeployment

Basic math tool using JSP/Servlet combination and Ajax

I have a follow-up question to my previous inquiry on Stack Overflow. I believe this topic deserves its own discussion due to the thorough response I received. My goal is to develop a straightforward calculator using JSP. The calculator will include two t ...

javajavascriptajaxjspservlets