Show a div only when a value = 0 - javascript

I have a problem with this script.
The script shows to me the hidden div #regalo if #total is between 99.99 and 299.99 ... ok, but (now), I also need to show the hidden div #alert when #total is 0 (zero), and be available to show if values ​​of #total more than 1 , and only when the screen is in landscapeand mode...
Truth is that I can't find a way to modify the code.
Any ideas?
$(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();
//if(total === 0) {
//if(total == 0) {
//if(total < 1) {
//$('#alert').hide();
//}
//else{
//$('#alert').show();
//};
if (localStorage.getItem('suppress_gift_tooltip_1') == null) {
$('.tooltip').show();
window.setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
//--------------------
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 {
console.log("FAIL");
$('#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();
});
#alert {
display: none
}
#media screen and (max-width:999px) and (orientation:landscape) {
#alert {
display: block !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="regalo"></div>
<div id="alert"></div>
<!-- I need to show this div when the #total equals zero -->

This is where consistent and sensible indentation is important. All of the conditions you're trying are all valid:
if (total === 0)
if (total == 0)
if (total < 1)
Any one of them by itself will work just fine. But the problem is that they're not by themselves. They're inside another condition:
if (total > 99.99 && total < 299.99)
When that condition is true, none of your above conditions can possibly be true. The same variable (total) can not be greater than 99.99 and equal to 0 at the same time.
Don't put the test for zero inside of that if block:
if (total > 99.99 && total < 299.99) {
if (total === 0) {
//...
}
}
Put it outside of that if block:
if (total > 99.99 && total < 299.99) {
//...
}
if (total === 0) {
//...
}

Have a try with this
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total")) || 0;
var total = parseFloat($("#total").val());
if (totalStorage && total === 0) {
total = totalStorage;
}
$('#regalo').toggle(total > 99.99 && total < 299.99);
$("#alert").toggle(!total);
if ($('#regalo').is(":visible") && localStorage.getItem('suppress_gift_tooltip_1')!="true") {
$('.tooltip').show();
localStorage.setItem('suppress_gift_tooltip_1',"true");
window.setTimeout(function() {
$('.tooltip').fadeOut('slow');
}, 9000);
}
}

Related

How to continuously send radio signals on Micro:bit without a forever loop?

I'm trying to make a remote controlled car with a camera. I need to send radio signals constantly which depending on the message sent will do certain things. I should have to hold down the buttons on the controller to execute the code. When no button is held I need to reset the steering and the camera should go down (there is a button for it to go up). How can I send continuous radio signals to update? The micro:bit is a V2 model. We're using DF-Driver and Kitronik Game Controller.
Here's my current code:
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Fire1, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
radio.sendString("S")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Fire2, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
radio.sendString("CU")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Down, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
radio.sendString("B")
})
input.onButtonPressed(Button.A, function () {
radio.sendString("CL")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Up, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
radio.sendString("F")
})
radio.onReceivedString(function (receivedString) {
if (receivedString == "CL" && domeServoHorizontalAngle > 0) {
domeServoHorizontalAngle += -5
}
if (receivedString == "CR" && domeServoHorizontalAngle < 180) {
domeServoHorizontalAngle += 5
}
if (receivedString == "S") {
motor.motorStopAll()
}
if (receivedString == "CU" && domeServoVerticalAngle < 180) {
domeServoVerticalAngle += 5
} else {
if (domeServoVerticalAngle > 0) {
domeServoVerticalAngle += -5
}
}
if (receivedString == "F") {
motor.MotorRun(motor.Motors.M1, motor.Dir.CCW, 255)
}
if (receivedString == "B") {
motor.MotorRun(motor.Motors.M1, motor.Dir.CW, 255)
}
if (receivedString == "L") {
motor.servo(motor.Servos.S1, 135)
} else {
if (receivedString == "R") {
motor.servo(motor.Servos.S1, 45)
} else {
motor.servo(motor.Servos.S1, 90)
}
}
motor.servo(motor.Servos.S3, 180 - domeServoHorizontalAngle)
motor.servo(motor.Servos.S2, 180 - domeServoVerticalAngle)
})
input.onButtonPressed(Button.B, function () {
radio.sendString("CR")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Right, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
radio.sendString("R")
})
Kitronik_Game_Controller.onButtonPress(Kitronik_Game_Controller.ControllerButtonPins.Left, Kitronik_Game_Controller.ControllerButtonEvents.Down, function () {
radio.sendString("L")
})
let domeServoVerticalAngle = 0
let domeServoHorizontalAngle = 0
domeServoHorizontalAngle = 90
domeServoVerticalAngle = 90

add multiple numbers to count jquery

this is the dead script for my shooter game (the buttons are just for testing)
but for some reason i cant figure out how to add 10 instead of 1
this is what i have now:
(function(){
const buttons = document.querySelectorAll('.counterBtn')
let count= 0
//Add event listeners and functionailty to each button
buttons.forEach(function(button){
button.addEventListener('click', function(){
//buttons
if (button.classList.contains('-1')){
count--
} else if (button.classList.contains('+1')){
count++
} else if (button.classList.contains('+10')){
}
//Select the counter text
const counter = document.querySelector('#counter')
counter.textContent = count
//dead / alive
if (count <= 0 ){
counter.style.color = 'red'
console.log("dead")
} else if (count > 0){
counter.style.color = 'lightgreen'
console.log("alive")
} else {
counter.style.color = '#000000'
}
if (count <= 0) {
alert ("you died")
} else if (count > 100 ) {
alert ("u r ful health")
} else {
return
}
})
})
})()
can someone please help me?
Use +=, for example:
count += 10
Of course this also works, but is more verbose:
count = count + 10
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment

Javascript - Hide a tooltip after N seconds, but on my script

I'm trying to show a tooltip at the same time that my current script shows a div (gift) if a condition is met:
if(total > 999 && total < 2999) { $('#gift-1').show();
The same goes for #gift-2 :
if(total > 3000 && total < 4500) { $('#gift-2').show();
At that moment the corresponding tooltip should be visible:
#gift-1 = .tooltip-1
#gift-2 = .tooltip-2
And these should be shown only for 9 seconds, then disappear until the div ( #gift -1 or the div #gift-2 ) is shown again:
I tried something like this, but it has not worked for me:
if(total > 999 && total < 2999) { $('#gift-1').show();
$('.tooltip-1').fadeOut('slow');},9000);
I am learning JS (novice, level 0) and the truth is that I do not know
how I should approach this issue.
Any ideas...?
Thank in advance!
//-------------
HTML
<div class="tooltip-1"></div>
<div class="tooltip-2"></div>
<div id="gift-1"></div>
<div id="gift-2"></div>
CSS
.tooltip-1,.tooltip-2 {display:none}
Script
$(document).ready(function(){
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total"));
var total = Number($("#total").val().replace(".",""));
if(totalStorage != null && total === 0) {
total = totalStorage;
}
if(total > 999 && total < 2999) {
$('#gift-1').show();
}
else{
$('#gift-1').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().replace(".","")));
}
});
manageRegalo();
});
// -------------------------------------------------
$(document).ready(function(){
function manageRegaloDos() {
var totalStorage = Number(localStorage.getItem("total"));
var total = Number($("#total").val().replace(".",""));
if(totalStorage != null && total === 0) {
total = totalStorage;
}
if(total > 3000 && total < 4500) {
$('#gift-2').show();
}
else{
$('#gift-2').hide();
}
}
$(document).on('click', function (event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegaloDos();
localStorage.setItem('total', Number($("#total").val().replace(".","")));
}
});
manageRegaloDos();
});
it is a bit difficult to exactly grasp all of your question. A fiddle (jsfiddle.net) is always helpful so maybe next time you can make one.
However, if I understand your question correctly the problem is not showing the tooltip but fading it out after 9 seconds, right?
I think you can change this code:
if(total > 999 && total < 2999) {
$('#gift-1').show();
$('.tooltip-1').fadeOut('slow');
},9000);
... to this code: (actually your code probably will produce a syntax error?):
if(total > 999 && total < 2999) {
$('#gift-1').show();
$('#tooltip-1').show(); // Maybe you did this already then you don't need this line.
window.setTimeout(function(){
$('.tooltip-1').fadeOut('slow');
},9000);
}
EDIT: To respect the additional info that a tooltip should only show once there are various ways to go. One would be to store the tooltips in eg. a window. variable. The other would be via CSS classes. I use CSS classes here (this is untested code):
if(total > 999 && total < 2999) {
$('#gift-1').show();
if (!$('#tooltip-1').hasClass('alreadyShown')) {
$('#tooltip-1').show().addClass('alreadyShown');
window.setTimeout(function(){
$('.tooltip-1').fadeOut('slow');
},9000);
}
}

Can you nest on click events?

I'm making a pomodoro clock with a break timer and a session timer. I'm using a single numpad to input the data into each clock by trying to nest the o'clock event to set each clock. To make it happen you click the display for the clock and then start inputting the buttons. There is 0-9 a delete button and an enter button. I haven't been able to get it to even display anything for either function. So I'm starting to wonder if what I'm trying to do would even work? Just looking for whether you can nest on click events and if so what I'm doing wrong. Or another method for what I'm looking to do. Made a fiddle to view it minimize the js and css windows. https://jsfiddle.net/zackluckyf/jhe98j05/1/
$(".session-time-clock").click(function(){
// changes the color to make it flash, add a duration and then change it back
$(".num-button").css("background-color", "#BCC6CC");
function myFunction() {
myVar = setTimeout(changeBackground, 500);
}
function changeBackground() {
$(".num-button").css("background-color", "#575e62");
}
myFunction();
sessionTimeClock = "00:00";
counter = 4;
/*
Will this work?
*/
$("button").click(function(){
// gets button text label
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
{
if(counter === 4)
{
sessionTimeClock = sessionTimeClock.slice(0,counter-1) + input;
}
if(counter === 3)
{
sessionTimeClock = "00:" + input + sessionTimeClock.slice(4);
}
if(counter === 1)
{
sessionTimeClock = "0" + input + sessionTimeClock.slice(2);
}
if(counter === 0)
{
sessionTimeClock = input + sessionTimeClock.slice(1);
}
counter--;
if(counter === 2)
{
counter--;
}
}
else if(input === "X")
{
if(counter === 3)
{
sessionTimeClock = "00:0" + sessionTimeClock.slice(4);
}
else if(counter === 1)
{
sessionTimeClock = "00:" + sessionTimeClock.slice(3);
}
else if(counter === 0)
{
sessionTimeClock = "0" + sessionTimeClock.slice(1);
}
}
else if(input === "Enter")
{
return;
}
$(".session-time-clock").text("hello");
});
});
$(".break-time-clock").click(function(){
$(".num-button").css("background-color", "#BCC6CC");
function myFunction() {
myVar = setTimeout(changeBackground, 500);
}
function changeBackground() {
$(".num-button").css("background-color", "#575e62");
}
myFunction();
breakTimeClock = "00:00";
counter = 4;
$("button").click(function(){
// gets button text label
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
{
if(counter === 4)
{
breakTimeClock = breakTimeClock.slice(0,counter-1) + input;
}
if(counter === 3)
{
breakTimeClock = "00:" + input + breakTimeClock.slice(4);
}
if(counter === 1)
{
breakTimeClock = "0" + input + breakTimeClock.slice(2);
}
if(counter === 0)
{
breakTimeClock = input + breakTimeClock.slice(1);
}
counter--;
if(counter === 2)
{
counter--;
}
}
else if(input === "X")
{
if(counter === 3)
{
breakTimeClock = "00:0" + breakTimeClock.slice(4);
}
else if(counter === 1)
{
breakTimeClock = "00:" + breakTimeClock.slice(3);
}
else if(counter === 0)
{
breakTimeClock = "0" + breakTimeClock.slice(1);
}
}
else if(input === "Enter")
{
return;
}
$(".break-time-clock").text(breakTimeClock);
});
});
The supplied code is not identical to the jsfiddle. I will relate to the jsfiddle:
You have this code:
$("button").click(function(){
if(input === "Start")
{
// start clock code
}
else if(input === "Pause")
{
// pause clock code
}
else if(input === "Reset")
{
sessionTimeClock = "00:00";
breakTimeClock = "00:00";
}
return true;
});
This is the first time you assign a click handler to "button" and therefore it gets called first.
The "input" variable is not defined, and therefore the other handlers are not called. (You can see an error in the Dev Tools console).

JQuery .focus() not work in .blur() event in Firefox

i have used below code but it not work in firefox for focus textbox in .blur() event using JQuery
$("#txtfname").focus(function () {
if ($("#txtfname").val() == "" && $("#txtfname").val().length >= 2) {
$("#fnamemsg").hide();
}
});
$("#txtfname").blur(function () {
if ($("#txtfname").val() != "" && $("#txtfname").val().length < 2) {
$("#fnamemsg").show();
$("#fnamemsg").html("Minimum 5 character");
$("#txtfname").focus();
}
else { $("#fnamemsg").hide(); }
});
Your conditions are messed up and your message doesn't match your conditions either.
The following will hide the message on focus if the value of #txtfname is 5 or more characters and show the message on blur if its less than 5 characters.
$("#txtfname").focus(function () {
if ($("#txtfname").val().length >= 5) {
$("#fnamemsg").hide();
}
});
$("#txtfname").blur(function () {
if ($("#txtfname").val().length < 5) {
$("#fnamemsg").show();
$("#fnamemsg").html("Minimum 5 characters");
$("#txtfname").focus();
}
else { $("#fnamemsg").hide(); }
});
$("#txtfname").focus(function () {
//Check if value is blank or not
if ($("#txtfname").val() === "" && $("#txtfname").val().length >= 2) {
$("#fnamemsg").hide(); // Hide message
}
});
var element = document.getElementById('txtfname');
element.focus();
element.onblur = function () {
if (element.value !== "" && element.value.length < 2) {
$("#fnamemsg").show();
$("#fnamemsg").html("* Firstname required 2 character");
setTimeout(function () {
element.focus();
}, 0);
} else {
$("#fnamemsg").hide();
}
};

Categories