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

user_13132762 0
Viewed 1009

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>

css html jquery javascript
3 Answers

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>

user_82025890

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.

user_11721890

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;
  });
});
user_131327620
Related