How do I use JavaScript with Yes / No buttons for an Age Verification popup?

Question

I'm not very experienced with JavaScript and I'm trying to set up an Age Verification pop up for a Square Space website. I'm having trouble with the Yes / No button functionality and I can't figure out how to make them work. The idea is that when "Yes" is clicked, the pop up goes away and that selection is remembered for the remainder of that session. When "No" is clicked, the site exits. Any help is greatly appreciated.

I have the following code pasted into the site-wide Header Code Injection:

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {
    //sessionStorage.setItem('advertOnce','true');
    $('.box').show();
  } else {
    $('.box').hide();
  };

  $('#btn-alpha').click(function() {
    sessionStorage.setItem('advertOnce', 'true');
    $('.box').hide();
  });

  $('#btn-beta').click(function() {

    window.location.href = 'http://google.com/';

  });
});

/*----------------------------------------------   
-Defualt to border-box
-----------------------------------------------  */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-family: helvetica;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: Raleway;
  line-height: 1.4;
}


/*----------------------------------------------   
--Fluid body sizing
-----------------------------------------------  */

body {
  font-size: 100%;
}

@media (min-width: 32em) {
  body {
    font-size: 110%;
  }
}

@media (min-width: 54em) {
  body {
    font-size: 111%;
  }
}

@media (min-width: 74em) {
  body {
    font-size: 115%;
  }
}

@media (min-width: 96em) {
  body {
    font-size: 135%;
  }
}

a.btn {
  background-color: #e3c827;
  color: #000;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
}

a.btn.btn-beta {
  background-color: #800000;
}

.overlay-verify {
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.box {
  background: #fff;
  position: relative;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  margin: 0 auto;
  z-index: 9;
  width: 70%;
  height: 40%;
  display: table;
}

.box .box-left,
.box .box-right {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 5%;
}

@media (min-width: 54em) {
  .box .box-left,
  .box .box-right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}

.box .box-left p,
.box .box-right p {
  position: relative;
  z-index: 3;
}

.box .box-left {
  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
  background-size: cover;
}

.box .box-left img {
  position: relative;
  z-index: 1;
  width: 9em;
}

.box .box-left:after {
  content: '';
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.box .box-right {
  background-color: #000000;
  text-align: center;
}

.box .box-right h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin: 0 auto;
}

.box .box-right p {
  color: #fff;
}

.box .box-right small {
  color: #fff;
}

.box .box-right .btn {
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 0.9em 1em 0.7em;
  margin: 1em auto;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main>
  <article class="box">
    <div class="box-left">
    </div>
    <div class="box-right">
      <h3>Age Verification</h3>
      <p>This site requires you to be 21 years or older to enter. </p>
      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha" id="refresh-page">YES</a>

      <a href="#" class="btn btn-beta" id="refresh-page">NO</a>
    </div>
  </article>

  <div class="overlay-verify"></div>
</main>

Could you kindly explain how Java is relevant to this question? I don't understand. — Snow, Mar 27 '20 at 03:50
Java is to javascript as car is to carpet - One is essentially a toy, designed for writing small pieces of code, and traditionally used and abused by inexperienced programmers. The other is a scripting language for web browsers. — Jaromanda X, Mar 27 '20 at 04:00
Actually, why do you need it to remember "Yes"? All you need is your "Yes" & "No" button. Upon clicking "no", you run the code to exit the website. If click "Yes", then just bring them to your homepage or whatever page as a pure link created by ``. Is there a reason why you need to remember Yes was clicked? — Gosi, Mar 27 '20 at 04:05
@Gosi, my concern is that anytime a user navigates back to the homepage then the age gate is going to pop up again. — smspear32, Mar 27 '20 at 04:18
I added your code into a snippet, but fixed some glaring typos/mistakes (that didn't affect the question or make your code runnable). Closing bracket/parenthesis on your jQuery and removed an extra closing `` from your HTML — disinfor, Mar 27 '20 at 04:37
Although I did post an answer, I vote to close this since it's essentially a typo. — disinfor, Mar 27 '20 at 04:59
In summary, OP has used `$('#btn-alpha')` but the button(s) don't have that ID so should have used `$('.btn-alpha')`. When something "does nothing", always check your selectors with `console.log($('#btn-alpha').length)` — freedomn-m, Mar 27 '20 at 08:00

score 3 · Accepted Answer · answered Mar 27 '20 at 04:57

You are targetting the button classes as ids in your javascript. Replace the # for a . in these two lines:

$('#btn-alpha').click(function() {    // $('.btn-alpha')

and

$('#btn-beta').click(function() {     // $('.btn-beta')

It should work now, although the two buttons also have the same id like mentioned in the comments. Ids need to be unique, so at most one element has a certain id on the page.

Here is the corrected code (I commented out the part with sessionStorage):

jQuery(document).ready(function($) {
  /*
    if (sessionStorage.getItem('advertOnce') !== 'true') {
      //sessionStorage.setItem('advertOnce','true');

    } else {
      $('.box').hide();
    };
  */
  
  $('.box').show();
  
  $('.btn-alpha').click(function() {
    //sessionStorage.setItem('advertOnce', 'true');
    $('.box').hide();
  });

  $('.btn-beta').click(function() {

    window.location.href = 'http://google.com/';

  });
});

/*----------------------------------------------   
-Defualt to border-box
-----------------------------------------------  */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-family: helvetica;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: Raleway;
  line-height: 1.4;
}


/*----------------------------------------------   
--Fluid body sizing
-----------------------------------------------  */

body {
  font-size: 100%;
}

@media (min-width: 32em) {
  body {
    font-size: 110%;
  }
}

@media (min-width: 54em) {
  body {
    font-size: 111%;
  }
}

@media (min-width: 74em) {
  body {
    font-size: 115%;
  }
}

@media (min-width: 96em) {
  body {
    font-size: 135%;
  }
}

a.btn {
  background-color: #e3c827;
  color: #000;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
}

a.btn.btn-beta {
  background-color: #800000;
}

.overlay-verify {
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.box {
  background: #fff;
  position: relative;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  margin: 0 auto;
  z-index: 9;
  width: 70%;
  height: 40%;
  display: table;
}

.box .box-left,
.box .box-right {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 5%;
}

@media (min-width: 54em) {
  .box .box-left,
  .box .box-right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}

.box .box-left p,
.box .box-right p {
  position: relative;
  z-index: 3;
}

.box .box-left {
  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
  background-size: cover;
}

.box .box-left img {
  position: relative;
  z-index: 1;
  width: 9em;
}

.box .box-left:after {
  content: '';
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.box .box-right {
  background-color: #000000;
  text-align: center;
}

.box .box-right h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin: 0 auto;
}

.box .box-right p {
  color: #fff;
}

.box .box-right small {
  color: #fff;
}

.box .box-right .btn {
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 0.9em 1em 0.7em;
  margin: 1em auto;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main>
  <article class="box">
    <div class="box-left">
    </div>
    <div class="box-right">
      <h3>Age Verification</h3>
      <p>This site requires you to be 21 years or older to enter. </p>
      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha" id="refresh-page-yes">YES</a>

      <a href="#" class="btn btn-beta" id="refresh-page-no">NO</a>
    </div>
  </article>

  <div class="overlay-verify"></div>
</main>

@smspear32 The location.href will not work here as the "run code snippet" is in an iframe — Ivan86, Mar 27 '20 at 22:58

score 2 · Answer 2 · answered Mar 27 '20 at 04:58

Here is a working example (stack snippet may not save the sessionStorage, so check it out here: https://jsfiddle.net/v358z1yt/

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {
    $('.box').show();
  } else {
    $('.box').hide();
  };

  $('.btn-alpha').click(function() {
    sessionStorage.setItem('advertOnce', 'true');
    $('.box').hide();
  });

  $('.btn-beta').click(function() {
    window.location.href = 'http://google.com/';

  });
});

/*----------------------------------------------   
-Defualt to border-box
-----------------------------------------------  */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-family: helvetica;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: Raleway;
  line-height: 1.4;
}


/*----------------------------------------------   
--Fluid body sizing
-----------------------------------------------  */

body {
  font-size: 100%;
}

@media (min-width: 32em) {
  body {
    font-size: 110%;
  }
}

@media (min-width: 54em) {
  body {
    font-size: 111%;
  }
}

@media (min-width: 74em) {
  body {
    font-size: 115%;
  }
}

@media (min-width: 96em) {
  body {
    font-size: 135%;
  }
}

a.btn {
  background-color: #e3c827;
  color: #000;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
}

a.btn.btn-beta {
  background-color: #800000;
}

.overlay-verify {
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.box {
  background: #fff;
  position: relative;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  margin: 0 auto;
  z-index: 9;
  width: 70%;
  height: 40%;
  display: table;
}

.box .box-left,
.box .box-right {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 5%;
}

@media (min-width: 54em) {
  .box .box-left,
  .box .box-right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}

.box .box-left p,
.box .box-right p {
  position: relative;
  z-index: 3;
}

.box .box-left {
  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
  background-size: cover;
}

.box .box-left img {
  position: relative;
  z-index: 1;
  width: 9em;
}

.box .box-left:after {
  content: '';
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.box .box-right {
  background-color: #000000;
  text-align: center;
}

.box .box-right h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin: 0 auto;
}

.box .box-right p {
  color: #fff;
}

.box .box-right small {
  color: #fff;
}

.box .box-right .btn {
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 0.9em 1em 0.7em;
  margin: 1em auto;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <article class="box">
    <div class="box-left">
    </div>
    <div class="box-right">
      <h3>Age Verification</h3>
      <p>This site requires you to be 21 years or older to enter. </p>
      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha">YES</a>

      <a href="#" class="btn btn-beta">NO</a>
    </div>
  </article>

  <div class="overlay-verify"></div>
</main>

The issue was you were using #btn-alpha and #btn-beta as your selectors, but you needed to use the class names.

Also, I removed the duplicate ids from your buttons. That's no-no.

score 0 · Answer 3 · answered Mar 27 '20 at 22:50

Thank you all for your comments! I didn't catch the matching IDs, bad oversight on my part. Treating them as classes with '.' instead of '#' seems to have fixed the 'YES' button, however, the second button does not work. Further research from another question (window.location.href not working) led me to add

return false;

after the window.location.href but that still doesn't work. Thoughts?

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {
    $('.box').show();
  } else {
    $('.box').hide();
  };

  $('.btn-alpha').click(function() {
    sessionStorage.setItem('advertOnce', 'true');
    $('.box').hide();
  });

  $('.btn-beta').click(function() {
    window.location.href = "https://www.google.com/";
return false;
  });
});

The second button will not work here on StackOverflow, but it should work normally in your environment, because the script is run inside an iframe which we don't control. This is the error message that appears in the console when I run the code from my answer: `Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.` — Ivan86, Mar 27 '20 at 22:57
So by seeing the error in the console it means it worked and the browser tried to switch locations but figured out it can't because of the iframe settings — Ivan86, Mar 27 '20 at 22:59

How do I use JavaScript with Yes / No buttons for an Age Verification popup?

3 Answers3