0

I have a problem with my script.

I am showing a hidden div #alert only when #total=0, and what I am looking for is that it ONLY be displayed when the screen is in landscape. (See CSS).

What is the snippet of the script to add, and which evaluates whether the screen is landscape?

See online DEMO ( JSFiddle ).

Thanks in advance.

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

    var totalStorage = Number(localStorage.getItem("total"));
    var total = parseFloat($("#total").val());

    if (totalStorage != null && total === 0) {
      total = totalStorage;
    }

    if (total > 99.99 && total < 299.99) {
      console.log("PASS");
      $('#regalo').show();
      $('#alert').hide();

      if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
        $('.tooltip').show();
        window.setTimeout(function () {
          $('.tooltip').fadeOut('slow');
        }, 2000);

        //--------------------

        if (!$("#notify")[0].paused) { //play audio
          $("#notify")[0].pause(); //play audio
          $("#notify")[0].currentTime = 0; //play audio

        } else { // play audio
          setTimeout(function () { //play audio
            $("#notify")[0].play(); //play audio
          })
        }; //play audio

        //--------------------

        localStorage.setItem('suppress_gift_tooltip_1', 'true')
      }

    } else if (!total) {
      $('#regalo').hide();
      $('#alert').show();
    } else {
      console.log("FAIL");
      $('#alert').hide();
      $('#regalo').hide();
    }
  }

  $(document).on('click', function (event) {
    const target = event.target;
    if (target.matches('.comp-clone') || target.matches('.bbp')) {
      manageRegalo();

      localStorage.setItem('total', Number($("#total").val()));
    }
  });
  manageRegalo();
});

CSS:

  #alert,
  .tooltip {
    display: none
  }

  @media screen and (max-width:999px) and (orientation:landscape) {

    #alert {
      display: block;
    }
  }

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo">Regalo</div>
<br>
<div class="tooltip">Tooltip</div>
<br>
<div id="alert">Alert</div>
<br>
<input type="text" id="total" value="">
<button type="button" class="bbp">Enter</button>
Basel Issmail
  • 3,847
  • 7
  • 20
  • 36
Pablo_Web
  • 423
  • 2
  • 14

1 Answers1

1

Your problem basically is here:

 var total = parseFloat($("#total").val());

and consequently here

 } else if (!total) {
      $('#regalo').hide();
      $('#alert').show();

The first time you read total it provides NaN and then the else if (!total) is executing $('#alert').show();

For that reason, you see alert message.

F.bernal
  • 2,594
  • 2
  • 22
  • 27