I am trying to re-create a color guess game where you click on divs that are random colors and you have to guess which one it asks for. However, when I try to add difficulty by adding more divs using the .append function, the divs do not respond to clicks. I have tried using .on("click", function(){}), and still not working.
$(function() {
var initialTrys = 58;
var difficulty = 9;
//End of Game Settings
var trys = initialTrys;
$("#col").html(getRandomColor());
$("#try").html(trys);
run(difficulty);
cor();
$(".color").on("click", function() {
var thisColor = $(this).css("backgroundColor");
if (trys > 0) {
trys--;
$("#try").html(trys);
} else if (trys === 0) {
$("#alert").html("No More Tries").css("color", "red");
// e.preventDefault();
// return false;
}
console.log("clicked");
if (thisColor == $("#col").html() && trys !== 0) {
$("#alert").html("You Got It!").css("color", "green");
$(this).siblings().addClass("clicked").css("backgroundColor", thisColor);
console.log("correct");
} else {
$(this).addClass("clicked");
}
});
$("#reset").on("click", function() {
trys = initialTrys;
$("#alert").html("");
$("#try").html(trys);
$(".color").each(function() {
$(this)
.addClass("color")
.removeClass("clicked")
.css("backgroundColor", getRandomColor());
});
$("#col").html(getRandomColor());
cor();
});
function getRandomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = "rgb(" + r + ", " + g + ", " + b + ")";
return color;
}
function cor() {
$(".color")
.eq(Math.floor(Math.random() * $(".color").length))
.css("backgroundColor", $("#col").html());
}
$("#diffSlide").on("change", function() {
if ($(this).val() == 0) {
$("#diff").html("Easy").css("color", "green");
$(".colorWrapper").children().remove();
run(difficulty);
} else if ($(this).val() == 1) {
$("#diff").html("Medium").css("color", "orange");
$(".colorWrapper").children().remove();
run(difficulty*2);
} else if ($(this).val() == 2) {
$("#diff").html("Hard").css("color", "red");
$(".colorWrapper").children().remove();
run(difficulty * 3);
}
});
function randColor() {
$(".color").each(function() {
$(this).css("backgroundColor", getRandomColor());
});
}
function run(difficulty) {
for (var i = 1; i <= difficulty; i++) {
$(".colorWrapper").append("<div class='color'></div>");
randColor();
if (i % 3 === 0) {
$(".colorWrapper").append("<br />");
}
}
}
});
Note: When the slider does not move, it works fine it is just when you try to change the difficulty.
It looks like you are not attaching a click handler to the newly appended div when it is appended. Abstract your $(".color").on("click", function() {...} into something like:
function attachClickHandler(){
$(".color").on("click", function() {...} //from ln 10 of your code
}
Then you can call attachClickHandler()on ln 10 as well as after the append in run(). This will attach the click handler both when the code initially runs as well as after the new div is appended.
I think this may work for you.
$(document).on("click", ".color", function(){
})
Related
Hello all of the knowers of javascript,
I have a little problem about javascript and would like one of you to help me to solve the problem.
If you know the 'PageRevealEffects' plugin there are multiple pages that in one HTML are turning on by javascript.
Here are the plugin documentation and demo version at the bottom of documentation: https://tympanus.net/codrops/2016/06/01/multi-layer-page-reveal-effects/
So my problem is I want to connect the navbar and logo click to the plugin,
http://bagrattam.com/stackoverflow/PageRevealEffects/
Here is the code by which it works
(function() {
$('.navbar-brand').click(function(){
$(this).data('clicked', true);
});
var n;
$('#nav a').click(function () {
n = $(this).parent().index() + 1;
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector('.navbar-brand').addEventListener('click', function() { reveal('bottom'); });
var navli = document.getElementsByTagName("ul");
for (var i = 0; i < navli.length; i++) {
navli[i].addEventListener('click', function() { reveal('top'); });
}
// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
// this is the part where is running the turning of pages
classie.remove(pages[currentPage], 'page--current');
if ($('.navbar-brand').data('clicked')) {
currentPage = 0;
} else {
currentPage = n;
}
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}
})();
http://bagrattam.com/stackoverflow/PageRevealEffects/
Here is the solution
var n;
$('#navbar a').click(function(){
if($(this).attr('id') == 'a') {
n = 0;
} else if($(this).attr('id') == 'b') {
n = 1;
} else if($(this).attr('id') == 'c') {
n = 2;
} else if($(this).attr('id') == 'd') {
n = 3;
} else if($(this).attr('id') == 'e') {
n = 4;
};
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector("#a").addEventListener('click', function() { reveal('top'); });
document.querySelector("#b").addEventListener('click', function() { reveal('top'); });
document.querySelector("#c").addEventListener('click', function() { reveal('top'); });
document.querySelector("#d").addEventListener('click', function() { reveal('top'); });
document.querySelector("#e").addEventListener('click', function() { reveal('top'); });
// triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn)
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
classie.remove(pages[currentPage], 'page--current');
currentPage = n;
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}
I have a function that checking board is there a searching element.
First script creating a board with different elements. Element in the square next to board is element that user has to find on the board and click them.
User has to click (as quick as possible) all searching elements. After click on element function checking a board, is there more elements. If yes then nothing happen and user has to click another one. If on board there isn’t searching elements then function display a time and new board create.
But some reason function works correct only first time after page load. Latter function ignore more then one element on board or see element that doesn’t exist on board any more.
Can you tell me what is wrong.
Part of code bellow and there is a link to testing page.
http://doomini2.linuxpl.info/font/
Thank you
function secondStage() {
createBoxes(59);
var usingSet = [];
var i = 0;
var boxList = document.querySelectorAll("#board > div");
createSet(usingSet, 20, shapes);
(function paint() {
if (i <= 59) {
var curentBox = boxList[i];
curentBox.className = usingSet[draw(20)];
curentBox.style.color = colors[draw(colors.length - 5)];
timeStop = setTimeout(paint, 50);
i++;
} else {
var findShape = boxList[draw(59)];
toFind.className = findShape.className;
toFind.style.color = findShape.style.color;
findBoxes(boxList);
clearTimeout(timeStop);
}
})();
}
//function checks boxes to find a proper shape
function findBoxes(boxList) {
startTime = Date.now();
board.addEventListener("mousedown", function (e) {
if ((e.target.className === toFind.className)) {
e.target.className = "correct";
e.target.innerHTML = "OK";
checkBoard();
} else if (e.target.id === "board" || e.target.className === "correct") {
} else {
e.target.className = "false";
e.target.innerHTML = "NO";
}
}, false);
function checkBoard() {
var condition = false;
console.log(condition);
for (var x = 0; x < boxList.length; x++) {
if ((boxList[x].className === toFind.className)) {
condition = true;
console.log(condition);
}
}
if (condition === false) {
var clickTime = Date.now();
var timeResult = parseFloat(((clickTime - startTime) / 1000).toFixed(3));
lastResult.innerHTML = timeResult + "s";
secondResult[secondResult.length] = timeResult;
console.log(secondResult);
displayResult(secondStage);
}
}
}
//function displaig results after every single round
function displayResult(stage) {
cover.className = "";
TweenMax.to("#lastResultDiv", 1, {ease: Back.easeOut, right: (winWidth / 4), });
TweenMax.to("#go", 1, {ease: Back.easeOut, top: (winWidth / 3), onComplete: function () {
goButton.addEventListener("click", function () {
clear();
}, false);
}});
//clear board and return to play
function clear() {
TweenMax.to("#lastResultDiv", 1, {ease: Back.easeIn, right: winWidth, });
TweenMax.to("#go", 1, {ease: Back.easeOut, top: -100, onComplete: function () {
cover.className = "hide";
lastResultDiv.style.right = "-592px";
toFind.className = "";
board.innerHTML = "";
if (firstStageRound === 10) {
secondStage();
} else if (secondStageRound === 5) {
thirdStage();
} else {
stage();
}
}});
}
}
Not Load this File http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js
try to local path
I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};
Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});
finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.
what am I doing wrong? I am trying to show bars corresponding to the initial values of the class="likes"
Here is the fiddle
http://jsfiddle.net/sghoush1/VU3LP/40/
The Jquery looks like this
var baractive = $('<div class="barActive"></div');
baractive.appendTo('.bar');
function checkNumber() {
var valueCurrent = parseInt($(".likes").text());
if(isNaN(valueCurrent) || valueCurrent <= 20) {
$(".barActive").css('height', '20px').css('width', '30px').css('background', 'green');
}
if(isNaN(valueCurrent) || valueCurrent <= 60) {
$(".barActive").css('height', '20px').css('width', '80px').css('background', 'green');
}
}
checkNumber();
You need a loop in the checkNumber() function, so that it will check the value of each .likes element and update the corresponding bar.
function checkNumber() {
$(".likes").each(function () {
var valueCurrent = parseInt($(this).text());
if (isNaN(valueCurrent) || valueCurrent <= 20) {
$(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '30px').css('background', 'green');
} else if (isNaN(valueCurrent) || valueCurrent <= 60) {
$(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '80px').css('background', 'green');
}
});
}
FIDDLE
Currently, var valueCurrent = parseInt($(".likes").text()); parses text of all like combined, with result being 2010402060, which is probably not what you want.
I'd change checkNumber function this way:
function checkNumber() {
var bars = $(".bar"),
likes = $(".likes");
likes.each(function (index, like) {
var value = parseInt($(like).text(), 10),
bar = bars.eq(index).find(".barActive");
if (value <= 60) bar.css("width", 80);
if (value <= 20) bar.css("width", 30);
});
}
...and move barActive styles into CSS. Working example at jsFiddle.
i am developing a jquery application. I have 10 divs with quotes. I am trying to create a function that takes a number and randomly displays that number of quotes from the 10 divs for 10 seconds and hide the divs. Then repeat the process again. I have not been able to do it please help me out. here is my code:
$(document).ready(function(){
var div_number = 4;
var used_numbers = new Array();
var todo = setInterval(showQuotes(),3000);
function showQuotes(){
used_numbers.splice(0,used_numbers.length);
$('.quotes').hide();
for(var inc = 0; inc<div_number; inc++) {
var random = get_random_number();
$('.quotes:eq('+random+')').show();
}
$('.quotes').fadeOut(3000);
}
function get_random_number(){
var number = randomFromTo(0,9);
if($.inArray(number, used_numbers) != -1) {
get_random_number();
}
else {
used_numbers.push(number);
return number;
}
}
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
});
Changes I made:
hide the .quotes on launch via a stylesheet
run showQuotes() once before setInterval(showQuotes,10000), and
add a .delay() before fading the quotes out
Py's 'return' added to get_random_number
http://jsfiddle.net/cMQdj/1/
the changed JavaScript:
$(document).ready(function () {
var div_number = 4;
var used_numbers = new Array();
showQuotes();
var todo = setInterval(showQuotes, 10000);
function showQuotes() {
used_numbers.splice(0, used_numbers.length);
$('.quotes').hide();
for (var inc = 0; inc < div_number; inc++) {
var random = get_random_number();
$('.quotes:eq(' + random + ')').show();
}
$('.quotes').delay(6000).fadeOut(3000);
}
function get_random_number() {
var number = randomFromTo(0, 9);
if ($.inArray(number, used_numbers) != -1) {
return get_random_number();
} else {
used_numbers.push(number);
return number;
}
}
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
});
and add to your stylesheet:
.quotes {display:none}
I didn't test everything, but i already see one point that might block you, the get_random_number does not always return a number. To do so, it should be
function get_random_number(){
var number = randomFromTo(0,9);
if($.inArray(number, used_numbers) != -1)
{
return get_random_number();
}
else
{
used_numbers.push(number);
return number;
}
}
Hope that helps.