I want to create a nice animation where a paragraph fade, change the content, unfade, change again and so on. the thing is the line where I set the paragraph content got executed before the fade-unfading things finished.
function displayAnim(x){
let textBox = document.getElementById("resultBoxText");
fadeO(textBox,x,0);
}
function fadeO(elem,x,i){
$("#resultBoxText").fadeIn("2000",next(elem,x,i));
}
function next(elem,x,i){
elem.innerHTML = result[x][i]; //this line got executed well, but it executed 5 times already even before the first unfade happens
let nextI = i+1;
if(nextI >= 6){
$("#resultBoxText").fadeOut("2000",show(x));
return;
}else{
$("#resultBoxText").fadeOut("2000",fadeO(elem,x,nextI));
}
}
function show(x){
let textBox = document.getElementById("resultBoxText");
textBox.innerHTML = result[x][6] //it reach this line already. this line is supossed to be executed after the fades occur 5 times
}
what am I doing wrong?
thanks (^_^)
Related
And thanks for stopping by.
I've been trying to add a feature, or function, to a project that I'm working on, but I just can't wrap my head around it.
When my project loads I want the user to activate the time as soon as they move, or click, one of the orbs -- not as soon as the project loads. I know there's an onClick or click event, but I'm having trouble implementing it on the js code. I've gone as far as commenting-out or "greying" entire functions to test things out.
Here's some of the time code:
function clockStart() {
numberOfSecs = setInterval(function () {
seconds.text(`${second}`)
second = second + 1
}, 1000);
}
function rewindSec(seconds) {
if (seconds) {
clearInterval(seconds);
}
}
gameStart();
// GAMES BEGIN!!!
function gameStart() {
var cards = shuffle(listOfCards);
deckOfCards.empty();
match = 0;
Moves = 0;
moveNum.text("0");
ratingStars.removeClass("fa-angry").addClass("fa-star");
for (var i = 0; i < cards.length; i++) {
deckOfCards.append($('<li class="card"><i class="fab fa-' + cards[i] + '"></i></li>'))
}
sourceCard();
rewindSec(numberOfSecs);
second = 0;
seconds.text(`${second}`)
clockStart();
};
Here's a link to the project that I'm talking about:
Full Page View: https://codepen.io/idSolomon/full/RYPZNp/
Editor View: https://codepen.io/idSolomon/pen/RYPZNp/?editors=0010
WARNING: Project not mobile-friendly. At least not yet.
If someone can help me out with this, a thousand thank yous will come your way.
Thanks!
You can Change the event of starting the clock at another position
First remove the clockStart() function from the gameStart() method
seconds.text(`${second}`)
//clockStart();
if have added an Extra variable to detect if the clock is started or not
var isClockStarted=false;
The following code will start the timer when a card is clicked:
var sourceCard = function () {
deckOfCards.find(".card").bind("click", function () {
if(!isClockStarted)
clockStart();
The Bellow Code will check if the timer is started or not.
function clockStart() {
if(!isClockStarted){
isClockStarted=true;
numberOfSecs = setInterval(function () {
seconds.text(`${second}`)
second = second + 1
}, 1000);
}
}
I have found that you are not stopping the timer even after the game finishes
If canceled a game it starts timer again //toCheck
I'm currently using a setInterval function so that I can repeat text with an extra letter added to it for every 5 secs, hence I've set the time period for the setInterval function as 5000.
But I also want this function to be executed as soon as the page loads. To be clear the logic present inside the setInterval function should be executed as soon as the page loads and it should also be repeated for every 5 secs. Is it possible with setInterval function or else is there any other way to do it? Thank you in advance :)
setInterval(function(){
var x = document.getElementById('sample');
x.innerHTML = x.innerHTML+'L';
},5000);
<p id="sample">Sample Text</p>
Just make it a separate function, which you can then call right away. On top of that, you'll then have some nice reusable code:
function updateElement(){
var x = document.getElementById('sample');
x.innerHTML = x.innerHTML+'L';
}
setInterval(updateElement, 5000);
updateElement();
<p id="sample">Sample Text</p>
You can use named function run on init and call it each interval
setInterval(function someFunc() {
var x = document.getElementById('sample');
x.innerHTML = x.innerHTML + 'L';
return someFunc
}(), 1000);
<div id="sample"></div>
I'm trying to create a game with dialogue, and I want my text to change as the player clicks on a next image to progress the story.
For example:
Page loads - "Hi, I'm Joe."
Clicks sliced Image once - "Nice to meet you."
Clicks 2nd time - "How are you?"
I have tried onClick but that only allows me to change it once, I've tried using var counter as well but to no avail, it overrides my previous commands, which part of this am I doing wrong here?
var clicks = 0;
function changeText() {
{
clicks = 1;
document.getElementById('text').innerHTML = "Ughh... my head... What
happened...?";
}
}
function changeText() {
{
clicks = 2;
document.getElementById('text').innerHTML = "Testing 1 2 3";
}
}
function play() {
var audio = document.getElementById("audio");
audio.play();
}
<img onClick="changeText(); audio.play()" value=Change Text src="images/awaken/images/awaken_03.jpg" alt="" width="164" height="77" id="clicks" />
<p id="text">Where... am I...?</p>
First off all - your changeText() system is flawed - you're overwriting the same function multiple times at the same time, so the only one of those that will ever get called is the last one you declare. JavaScript doesn't wait until a function gets called to continue with the program.
The audio.play() also won't work - but I'm assuming that's a work in progress.
I changed your code so that instead of setting count to a specific value, it increments every time the function gets called, and it updates the text to the correct value in an array. Here's the updated changeText function:
var count = 0;
var text = [
"Where... am I...?", /* note that this will never get called, it's simply here for filling up the array*/
"This is the first text!",
"And this is the second!"
]
var changeText = function() {
count++;
document.getElementById('text').innerHTML = text[count];
}
In the future, you'll probably also want to check if(text[count] != 'undefined'), and if so write something like "Bye!" instead.
Issues in your code
Multiple function declaration of changeText()
Extra {} in changeText()
You are not updating value of clicks.
In your html, you have written audo.play() but no audio object is available. It should be play(). I have called play() function in changeText() function. This keeps HTML clean.
Following is updated code:
var clicks = 0;
function changeText() {
var text = ""
clicks++;
switch(clicks){
case 1: text = "Ughh... my head... What happened...?";
break;
case 2: text = "Testing 1 2 3";
break;
}
document.getElementById('text').innerHTML = text;
play();
}
function play() {
var audio = document.getElementById("audio");
audio.play();
}
<img onClick="changeText()" value=Change Text src="images/awaken/images/awaken_03.jpg" alt="" width="164" height="77" id="clicks" />
<p id="text">Where... am I...?</p>
Hope someone can shed some light on this issue for me.... I'm using a setInterval to alternate displaying headlines on a webpage. it fades out the previous one, then in the callback function fades in the new one. it used to work fine, however I separated the callback function from the fadeOut because I wanted to run it initially without a delay, and now I'm getting the initial headline, however when it comes time to change, they fade in for a split second and disappear again.
function processSidebar(data) {
var headlines = $.parseJSON(data);
var sIndex = 0;
function newSidebar(surl, sIndex) {
$(".sidebar").html(headlines[sIndex].date + '<br>' + headlines[sIndex].line + '');
$(".sidebar").fadeIn(400);
}
newSidebar("getme.php?blog=1&headline=1", sIndex);
setInterval(function() {
++sIndex;
if (sIndex == headlines.length) {sIndex = 0}
var surl="getme.php?blog=1&headline=" + headlines[sIndex].index;
$(".sidebar").fadeOut(400,newSidebar(surl,sIndex));
}, 10000); // end setInterval
}; // end processSidebar
jQuery's fadeOut wants a function as the complete argument.
You're giving newSidebar(surl,sIndex), which gets evaluated immediately and returns nothing (but does the whole fadeIn stuff).
You want to use an anonymous function:
$(".sidebar").fadeOut(400,function() { newSidebar(surl,sIndex) });
This is the entire function I am working on:
function collapse(){
var i = 0;
var currColors = [];
var currTitles = [];
// Get the color and the course id of all the current courses
$('.course').each(function (){
if (rgb2hex($(this).css("background-color")) !== "#f9f9f9") {
currColors.push(rgb2hex($(this).css("background-color")));
currTitles.push($(this).children(".course-id").text());
$(this).children(".course-delete").remove();
$(this).children(".course-id").text("");
$(this).css('background', "#f9f9f9");
}
});
alert("made it");
// Redistribute the classes
// This is where reverse lookup will eventually happen
i = 0;
$('div.course').each(function (){
if (i>=currTitles.length){
return false;
}
$(this).children(".course-id").text(currTitles[i]);
$(this).css('background', currColors[i++]);
$(this).append("<button id='temp' class='course-delete'>X</button>");
});
var i = currColors.length-1;
};
And this is the problematic section
$('.course').each(function (){
if (rgb2hex($(this).css("background-color")) !== "#f9f9f9") {
currColors.push(rgb2hex($(this).css("background-color")));
currTitles.push($(this).children(".course-id").text());
$(this).children(".course-delete").remove();
$(this).children(".course-id").text("");
$(this).css('background', "#f9f9f9");
}
});
I have this function collapse that is supposed to fill in the blank spot in a list of divs that the user has been adding to the screen if they delete one. This function was working fine at one point, but obviously I have screwed it up some how.
There are only and always will be 6 '.course' items because that is the size of the list. When collapse() is called it stops running after n times where n is the number of '.course' elements currently in use. The loop stops there and the whole function stops there. I have tried putting alert() statements everywhere but still no luck. If someone spots what I am missing I would really appreciate it.
I have figured out a work around for now, but I would like to know why my entire function is crashing in the middle.