onclick event not firing based on boolean flag

Question

I'm working on some code where if a user clicks on a particular button, that person is NOT presented with an exit popup upon exiting the page. The way I'm doing it is by setting a flag whenever the user clicks on the button. However, my code isn't working as expected: The popup loads whether or not the button is clicked. I don't understand why.

Edit: Help!

<!doctype html>
<html>
    <head>
        <title>Test!</title>

        <script>
            var bool = false;
            var config = new Object();
            config.surveyID = 3155031;
            config.takeSurveyURL = 'http://www.supporterfeedback.org/a/TakeSurvey';
            config.windowPositionLeft = 200;
            config.windowPositionTop = 300;
            config.home = 'http://www.surveyanalytics.com/';
            config.isRightToLeft = false;
            config.showFooter = true;

            // document.getElementById("btn").onclick = function()
            //      {
            //          bool = true;
            //      }; 
            function flag() {
                bool = true;
            }

            if (!bool) {
                window.onbeforeunload = function () {
                    QP_popupMain();
                };
            }
        </script>

        <script language="javascript"
            src="http://www.surveyanalytics.com//javascript/exitSurveyInvitation.js"
            type="text/javascript"></script>
        <noscript>

            <a href="http://www.supporterfeedback.org/a/TakeSurvey?id=3155031">Start Survey</a>

        </noscript>
    </head>
    <body>

        <a href="http://google.com"><img id="btn" onclick="flag()"
            src="http://kelowna.directrouter.com/~jeasprco/wp-content/uploads/2012/05/PanicButton2.png"/></a>

        <p>Hello, this is a test!</p>

    </body>
</html>

Don't use `new Object()`, use `{}` instead. `new Object()` will give developers pause because it's out of the ordinary. See http://stackoverflow.com/questions/4597926/what-is-the-difference-between-new-object-and-object-literal-notation Also, using `{}` syntax, you wouldn't have to type `config.` a boatload of times; it's noise. — Olson.dev, Aug 25 '15 at 01:03

score 0 · Answer 1 · answered Aug 25 '15 at 01:00

0

I think window.onbeforeunload = function () is operating as soon as the page loads, so what is inside if(!bool) is executing on the button press.

Try changing these two lines:

// var bool = false;

var bool;

// if (!bool) {

if (bool == false) {

answered Aug 25 '15 at 01:00

100pic

387
3
13

Barmar · Answer 2 · 2015-08-25T01:35:38.243

0

You're testing the flag once, when you assign the .beforeunload handler when the page is loaded. Calling flag() doesn't re-execute that code. You need to test it when the function is called.

window.onbeforeunload = function() {
    if (!bool) {
        return "You haven't clicked the button, do you really want to leave?"
    }
}

edited Aug 25 '15 at 01:35

answered Aug 25 '15 at 01:12

Barmar

741,623
53
500
612

You know that the only thing that a `beforeunload` handler is supposed to do is return a message that should be displayed to the user when they try to leave the page, right? So it doesn't seem like your handler is written correctly at all, since it doesn't return anything. – Barmar Aug 25 '15 at 01:25
Then what do you suggest? I want to deliver a popup on exit, but only if the user doesn't click the button. – J. Bauer Aug 25 '15 at 01:34
Return the message you want to display in the popup. – Barmar Aug 25 '15 at 01:35
The message is supposed to be a form, which is handled by QP_popupMain(). – J. Bauer Aug 25 '15 at 01:41

onclick event not firing based on boolean flag

2 Answers2