I tried MANY permutations, but was unable to happen on one that worked…
This is a short script for a Learning/ DEMO page, it is ready to run on your localhost, anybody curious to see it misbehaving. A double click on the stop button makes it work, but it just seems there must be a way to both stop the loop and reset, with one click.
I have been learning JavaScript for a few weeks only, so wouldn’t be surprised if the problem is something simple I am missing. Here is the offensive code 🙂
MY Loop
// At window loading, be good to have some .className
// set on the DIV elements which require them, so they show up.
var ScaryMonster = window.onload=function portofOrigin(){
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
};
// Then go ahead and define a shwack of functions the DIVS will
// be manipulated by through the action of the LOOP code.
// functions: ItemBar1
function ItemBar1COLOUR(){
timeoutIDxDiv1 = window.setTimeout(Div1neDOsomethingDoggoneIt, 160);
}
function Div1neDOsomethingDoggoneIt(){
Div1ne.className = "springME";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar2
function ItemBar2COLOUR(){
timeoutIDxDiv2 = window.setTimeout(Div2woDOsomethingDoggoneIt, 320);
}
function Div2woDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "springME";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar3
// here the Timer Function is defined for the Item #3 of the set of the Loop
function ItemBar3COLOUR(){
// it is set to fire, if called, at 480/800 milliseconds
timeoutIDxDiv3 = window.setTimeout(Div3hreeDOsomethingDoggoneIt, 480);
}
// This, is the Function which contains the code which
// will be run if Item #3 is called.
function Div3hreeDOsomethingDoggoneIt(){
// .defaultBORED is the *non~lit~up* state of appearance
// of the divs while the loop is running.
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
// while .springME is the *active* display appearance
// of the div during "animation loop*
Div3hree.className = "springME";
Div4our.className = "defaultBORED";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar4
function ItemBar4COLOUR(){
timeoutIDxDiv4 = window.setTimeout(Div4ourDOsomethingDoggoneIt, 640);
}
function Div4ourDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "springME";
Div5iver.className = "defaultBORED";
}
// functions: ItemBar5
function ItemBar5COLOUR(){
timeoutIDxDiv5 = window.setTimeout(Div5iveDOsomethingDoggoneIt, 800);
}
function Div5iveDOsomethingDoggoneIt(){
Div1ne.className = "defaultBORED";
Div2wo.className = "defaultBORED";
Div3hree.className = "defaultBORED";
Div4our.className = "defaultBORED";
Div5iver.className = "springME";
}
/* ****************************************** */
// This is the BEGIN POINT of the Main Timer Loop To create the faux~animation
function SetThemUP(){
// This Function creates a TIMESTAMP anywhere you wish to
// place one, by calling the function.
function JustTIMEstamp(){
var OkayFIRE = +new Date();
return OkayFIRE;
}
// For Whatever reason this works as a holder for a whole lot of functions
function wellrelaxCODEworkWITHmeHere(){
// The first item in this Function collection, is a TimeStamp.
// Obtained by calling a Function which has code to make one.
var newOkayFIRE = JustTIMEstamp();
// 1 of 4 Functions needed to build a friggin'
.
// It is a Function which when called, appends the
// assembled LB to the DOM as a child of the target DIV element.
function SoWriteTimeStampToDivYello(){
var myDiv1 = document.getElementById("Aaaiyeeah");
var YellowTitleWrite = myDiv1.appendChild(document.createTextNode(newOkayFIRE));
return YellowTitleWrite;
}
// 2 of 4. sic. it needs to create a discrete html element...
// the one referrenced above.
function FancyShitForLBWIN1(){
var compLbr="var inTheLinebreaks";
var thirdcompOFintheLinebreaks = "=document.createElement('br');";
var AssembledDocCreateLB=(compLbr+ thirdcompOFintheLinebreaks);
return AssembledDocCreateLB;
}
// 3 of 4. sic. and surprisingly, only works by directly
// inserting a line break onto the variable being
// cobbled together to provide a recycleable
construct...
function middleware(){
var myDiv33 = document.getElementById("Aaaiyeeah");
var inTheLinebreaks7=document.createElement('br');
myDiv33.appendChild(inTheLinebreaks7);
}
// 4 of 4 and the final component for the asset
// "reuseable
" which can be deployed in DIV "Aaaiyeeah" ONLY
// but of course, as many times as required, so at least it is useful.
function FancyShitForLBWIN2wo(){
var theAppending1stPart="myDiv42.appendChild(";
var varNameProper=("inTheLinebreaks");
var fouthPart=");";
var assembleAppenderHerself=(theAppending1stPart + varNameProper + fouthPart);
return assembleAppenderHerself;
}
// Oh, LookitThet, here it is, getting called.
// So, this is inside the wrapper Function, inside the TIMER Loop.
// Which has the effect that each time the LOOP gets called,
// a record of the TIMESTAMP GO~Time is written out to display.
SoWriteTimeStampToDivYello();
FancyShitForLBWIN1();middleware();FancyShitForLBWIN2wo(); //LINEBREAK
// wellrelaxCODEworkWITHmeHere() end of function:
}
// then call all of em at one shot here:
wellrelaxCODEworkWITHmeHere();
// these are the calling of the 5ive functions which are defined OUTSIDE of the MainTimerLoop; the STEPS or Components,
// from which the LOOP is assembled.
ItemBar1COLOUR();
ItemBar2COLOUR();
ItemBar3COLOUR();
ItemBar4COLOUR();
ItemBar5COLOUR();
// here is a call to the function in which the call is contained.
// By Setting the number, the number of milliseconds of the
// duration of the Loop Timer, is established.
// Therefore
// In order to have an even event duration, the events have got
// to be timed, themselves, in a ratio of their number
// to the length of time in milliseconds, which the Loop will Occupy.
CommenceAnnoyance = window.setTimeout(SetThemUP,800);
// SetThemUP() end of MAIN TIMER Loop :: psuedo~animation
}
/* ********************** */
/* ********************************* */
// Here begins parts of CODE suggested by Gordon.
// while this is called by the *Reset* button to reset the divs
// to their *Loop=OFF* appearance, AND clear the text
// from the DIV which displays one after another, the
// GoTime of the PerLoop Iterations of the MAIN LOOP.
function DestroyTheMonster() {
Stop();
Reset();
FTWxAnotherReset(); // that is a kludgy desperation~ploy
// to try to get rid of the unwanted .class
// which is still applied, and to reset all
// 5ive to the NON~running state... appearance.
}
// This is the *** OFF SWITCH *** for the MainTimerLOOP.
function Stop() {
window.clearTimeout(CommenceAnnoyance);
}
function Reset() {
var Aaaiyeeah = document.getElementById('Aaaiyeeah');
while (Aaaiyeeah.firstChild) {
Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
}
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
}
function FTWxAnotherReset() {
var Aaaiyeeah = document.getElementById('Aaaiyeeah');
while (Aaaiyeeah.firstChild) {
Aaaiyeeah.removeChild(Aaaiyeeah.firstChild);
}
Div1ne.className = "AsBeforeBubba";
Div2wo.className = "AsBeforeBubba";
Div3hree.className = "AsBeforeBubba";
Div4our.className = "AsBeforeBubba";
Div5iver.className = "AsBeforeBubba";
}
#TitleGhost{
position:absolute;
top:11px;
left:295px;
width:496px;
height:29px;
background-color:#8ADFFB;
font-size:19px;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
color:black;
border:3px solid navy;
padding-top:3px;
}
#ControlPlace{
position:absolute;
top:11px;
left:19px;
width:142px;
height:42px;
background-color:#33EFEA;
border:2px solid buttonface;
}
#ControlPlace button{
position:absolute;
top:6px;
left:13px;
width:112px;
height:29px;
background-color:buttonface;
font-family:bookman old style;
font-size:12px;
font-weight:bold;
color:navy;
}
#ControlPlaceSTOPPA{
position:absolute;
top:72px;
left:19px;
width:142px;
height:42px;
background-color:#33EFEA;
border:2px solid buttonface;
}
#ControlPlaceSTOPPA button{
position:absolute;
top:6px;
left:13px;
width:112px;
height:29px;
background-color:buttonface;
font-family:bookman old style;
font-size:12px;
font-weight:bold;
color:navy;
}
#Aaaiyeeah{ /*Displays Unix TimeSTAMP of Each Loop Begin~Time*/
position:absolute;
top:11px;
left:819px;
width:131px;
height:430px;
background-color:#C79C96; /* Impious Colours = "the lost art" */
color:#A48F04; /* Impious Colours = "GoldyGoldfish" */
border:2px solid black;
overflow-y:scroll;
}
/* Main Display Box */
#BeginLoopingLikeAMadBastard{
position:absolute;
top:137px;
left:295px;
width:492px;
height:298px;
background-color:#333333;
border:5px solid purple;
}
/* 5 Divs In the main display */
#Div1ne.defaultBORED{
position:absolute;
top:12px;
left:11px;
width:112px;
height:29px;
}
#Div1ne.springME{
position:absolute;
top:12px;
left:11px;
width:112px;
height:29px;
}
#Div2wo.defaultBORED{
position:absolute;
top:61px;
left:11px;
width:112px;
height:29px;
}
#Div2wo.springME{
position:absolute;
top:61px;
left:11px;
width:112px;
height:29px;
}
#Div3hree.defaultBORED{
position:absolute;
top:110px;
left:11px;
width:112px;
height:29px;
}
#Div3hree.springME{
position:absolute;
top:110px;
left:11px;
width:112px;
height:29px;
}
#Div4our.defaultBORED{
position:absolute;
top:159px;
left:11px;
width:112px;
height:29px;
}
#Div4our.springME{
position:absolute;
top:159px;
left:11px;
width:112px;
height:29px;
}
#Div5iver.defaultBORED{
position:absolute;
top:208px;
left:11px;
width:112px;
height:29px;
}
#Div5iver.springME{
position:absolute;
top:208px;
left:11px;
width:112px;
height:29px;
}
#Div1ne.AsBeforeBubba{
position:absolute;
top:12px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div2wo.AsBeforeBubba{
position:absolute;
top:61px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div3hree.AsBeforeBubba{
position:absolute;
top:110px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div4our.AsBeforeBubba{
position:absolute;
top:159px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
#Div5iver.AsBeforeBubba{
position:absolute;
top:208px;
left:11px;
width:112px;
height:29px;
background-color:#EEff78;
border:2px solid #FC3B03;
}
/* defining some .classNames, for some css statements controlled
by the JavaScript */
#Div1ne.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div2wo.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div3hree.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div4our.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div5iver.springME{
background-color:forestgreen;
border:4px solid red;
}
#Div1ne.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div2wo.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div3hree.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div4our.defaultBORED{
background-color:#333333;
border:2px solid white;
}
#Div5iver.defaultBORED{
background-color:#333333;
border:2px solid white;
}
Commence !!!
Stop Madness!
This Is JavaScript. Looping OR at Least Pretending To.
For anyone without their own stack but curious, see
Oh for … are you SERIOUS ????
See if this works…
Okay guys, you have a gaping hole in your functionality. I just spent 45 minutes or an HOUR formatting 450 lines manually, then think to add a link, and get the infamous and annoying Ooops! ANTI~jsfiddle.net bullshit? Pulllese! S.O. seems so far above that service, serves a different purpose… lighten up or incorporate a similar feature inhouse; just don’t understand the bias against it. I DO understand the desire to have substantial code ON SITE here at S.O…. but mebbe fine~tune when the backend complains about a link, neh? rant over
Still working the problem… I will not accept having to click twice, once to stop the animation/loop and once to reset the className of the 5 divs.
Outside of any weird race conditions (due to the
setTimeout), I don’t see any reason why this wouldn’t do what you desire…