I've been staring at the following problem for 3 hours now. I would like to start the whole code from the beginning after finishing the 'newLevel'-function at the bottom of the code. I've been trying to wrap the code inside of if() and while() statements but just can't get it to work.
Shortly the problem is that newLevel()-function can't send the new value of variable level to the beginning of the code. How could I do this?
Thank you for the downvotes!
$(document).ready(function(){
var level = 1;
if(level == 1)
{random variables}
if(level == 2)
{random variables}
if(level == 3)
{random variables}
$('#check').click(function(){ // if we click 'Check correct answer button
if(givenAnswer == correctAnswer)
{
$('#raisingCrystals').animate({
'marginTop' : "-=51%",
'opacity' : '0.0'
},2000, function(){
$('#crystalsH3 > h3').html('+3');
$('#crystalsH3 > h3').css('color','#0D5C94');
$('#crystalsH3').animate({
'font-size' : "10vw"
},2000, function(){
$('#totalPoint > h3').html(totalPoints);
$('#speak4 > p').css('font-size','1.7vw');
$('#speak4 > p').html('Blaa blaa...');
$('#check > h2').html('---Next assesment---');
// let's do a function that check, if the '---Next assesment---'-button is clicked
$('#check > h2').click(function newLevel(){
level++;
});
});
});
});
}
else
{
}
});
});
Replace the part of your code with this:
$('#check > h2').click(function () {
level++;
});
Related
With some help in Stackoverflow (I'm novice level 0 in JS), I have achieved that a div gift is shown when it fulfills a condition:
if(total > 999 && total < 2999) {
$('#gift').show();
And then show a tooltip, which will be hidden after 6 sec´s:
if(total > 999 && total < 2999) {
$('#gift').show();
$('.tooltip').show();
window.setTimeout(function(){
$('.tooltip').fadeOut('slow');
},6000);
}
OK, work well, but my interest now is that the tooltip is shown only once to the user, for which I have tried to use localStorage, but it does not work for me:
const showTooltip1=localStorage.getItem('tooltip');
if(showTooltip1==='false'){
$('.tooltip').hide();
}
// The section below is not of my interest in the script, but it may be
/*
$('#gift').on('click',function(){
$('.tooltip').fadeOut('slow');
localStorage.setItem('tooltip','false');
});
*/
What am I doing wrong here...?
It will be that the master-script (in each click) is firing the .show (); for the tooltip...?
Thanks in advance!
//-----------------------
Full-Script: (Without local Storage for tooltip )
$(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').show();
$('.tooltip').show();
window.setTimeout(function(){
$('.tooltip').fadeOut('slow');
},6000);
}
else{
$('#gift').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();
});
You haven't indicated what you're writing with setItem, so there's no way for us to know what getItem should be returning.
The logic you're after here is: If getItem returns null, show the tooltip and use setItem to put a value into localStorage so that subsequent checks will prevent the tooltip from showing.
You would need to modify your code along these lines:
if (localStorage.getItem('suppress_gift_tooltip') == null) {
// Your unaltered tooltip code
$('.tooltip').show();
window.setTimeout(function(){
$('.tooltip').fadeOut('slow');
},6000);
// Prevent subsequent display
localStorage.setItem('suppress_gift_tooltip', 'true')
}
The localstorage value will be null if you didn't assign the value. Better you can check with null and assign the boolean for further use.
if( !localStorage.getItem('toolTip') ) {
// operation
localStorage.setItem('toolTip',false);
}
The above condition will be true if toolTip item is not present in the localStorage and if the value of toolTip is false in the localStorage.
I'm trying to addClass and removeClass to a div based on top scrolling with jquery.
I created these two variables:
var mainHeight = $('#main-image').height()/1.10;
var footHeight = $('body').height() - $('footer').height();
And this is the script that doesn't works:
$(window).scroll(function(){
if ($(window).scrollTop() > mainHeight) {
$('#box_centrale').removeClass('chat-bottom, chat-top');
} else if ($(window).scrollTop() > footHeight) {
$('#box_centrale').removeClass('chat-bottom');
$('#box_centrale').addClass('chat-top');
} else {
$('#box_centrale').removeClass('chat-top');
$('#box_centrale').addClass('chat-bottom');
}
});
The "if" and "else" statement works but "else if" statement doesn't work...
Have you any idea why does not work?
(I apologize for my English)
I solved! There was an error in the second variable, missing parentheses to the operation. I decide to create a jsfiddle with an example of what I wanted to do, hoping that it will help someone in the future.
Thank you all
Here the link:
JSFiddle
$(document).ready(function(e) {
var mainHeight = $('#header').height()/2;
var footHeight = ($('body').height() - $('#footer').height() - 290);
$(window).scroll(function(){
if ($(window).scrollTop() < mainHeight) {
$('#fixed-box').css({
"bottom" : "calc(100% - 310px)",
});
} else if ($(window).scrollTop() > footHeight) {
$('#fixed-box').css({
"bottom" : "calc(260px)",
});
} else {
$('#fixed-box').css({
"bottom" : "calc(50% - 25px)",
});
}
});
});
I'm trying to hide/show sections of a page using the following script:
$(function () {
$('.open').on('click', function () {
var contentType = $(this).attr('id');
if (contentType == "all") {
$('.content-div').show();
} else if (contentType == "train" || "manual") {
$('.content-div.' + contentType).show();
$('.content-div:visible:not(.' + contentType + ')').hide();
} else if (contentType == "close") {
$('.content-div').hide();
} else {
$('.content-div.' + contentType).toggle();
}
});
});
A jsfiddle example is here with html
The issue is with the final line in the else part - this works correctly (show/hide the relevant div(s) with the associated class) when outside the if-else statement but doesn't work in the else section - the div appears the first time a numbered button is clicked, but doesn't disappear on reclicking.
What am I doing wrong? Many thanks.
Replace:
} else if (contentType == "train" || "manual") {
with:
} else if (contentType == "train" || contentType == "manual") {
"manual" is always evaluated as true therefore this whole else-if branch is evaluated as true. See MDN for more details.
In my JSON file I have 7 objects, where first 3 of them have "is_read" attribute == 1, and last 4 have "is_read" == 0.
I add rows, using a template and want to give tr different classes according to their "is_read" value (".news_read" for "is_read" == 1 and ".news_unread" for "is_read" == 0).
However, I end up with 7 rows that all have "news_unread" class. Though, console.log shows that I have 3 "newsData.get('is_read') == 1" and 4 "newsData.get('is_read') == 0" objects.
I wonder how to create rows with different classes. I tried to do newsRow.addClass, but the error message says that an object <tr><td>...</td></tr> (newsRow template) can't have a method addClass.
render: function() {
news.fetchMyNews();
for (var i = 1; i <= news.length; i++) {
var newsData = news.get(i);
var newsRow = JST["news/row"](newsData.attributes);
$("#news_tbody").append(newsRow).first('tr').attr("class",function(){
if (newsData.get('is_read') == 1)
return "news_read";
else if (newsData.get('is_read') == 0)
return "news_unread";
});
}
}
You wrote:
I tried to do newsRow.addClass, but the error message says that an object ... (newsRow template) can't have a method addClass.
But I can't find addClass in your example code:
$("#news_tbody").append(newsRow).first('tr').attr("class",function(){
if (newsData.get('is_read') == 1)
return "news_read";
else if (newsData.get('is_read') == 0)
return "news_unread";
});
I just can advice you to try this code(use addClass, instead of attr and add blocks in if statement):
$("#news_tbody").append(newsRow).first('tr').addClass(function(){
if (newsData.get('is_read') === 1){
return "news_read";
} else if (newsData.get('is_read') === 0) {
return "news_unread";
}
});
As #Pinal suggested, I used addClass instead.
However, after append(newsRow) I used .children('tr') and it worked fine.
$("#news_tbody").append(newsRow).children('tr').addClass(function(){
if (newsData.get('is_read') === 1){
return "news_read";
} else if (newsData.get('is_read') === 0) {
return "news_unread";
}
});
I have this function, see below:
function checkStartPrice (){
if ($('#StartingPrice')[0].value.length == 0){
alert("The 'Starting Price' cannot be left empty!");
return false;
} else {
var BuyItNowPrice = parseFloat($('#BuyItNowPrice').val());
var StartingPrice = parseFloat($('#StartingPrice').val());
var Reserve = parseFloat($('#Reserve').val());
if((BuyItNowPrice <= StartingPrice) && (StartingPrice > 0)){
alert("The 'Buy It Now' price must be higher...");
return false;
}
if((Reserve <= StartingPrice) && (StartingPrice > 0)){
alert("Your 'Reserve Price' must be higher...");
return false;
}
return true;
}
}
Question: How do I call it on blur? I tried this code below but it doesn't seem to work:
$('#StartingPrice').blur(function(){
checkStartPrice();
});
This is the correct way to call it.
The only reason it may fail is that the #StartingPrice element does not exist at the time of the .blur() call.
If it is present in the page, use this:
$(document).ready(function() {
$('#StartingPrice').blur(checkStartPrice)
})
If it is dynamically added via AJAX, use this:
$(document).ready(function() {
$('#StartingPrice').live('blur',checkStartPrice)
})
Note that the second solution requires at least jQuery 1.4.1