@codyhillauthorJul 14.2019 — #@coothead#1606261 I did do that in the original post. Your response was a code that had the same effect as what I wanted, not an explanation of how I can improve my code towards the effect I needed.
here are all the comments - [color=#069] /* information */ [/color] - for the code amendments...
``<i> </i>(function( d ) { /* see link #1 */ 'use strict'; /* see link #2 */ const colorBtn = d.querySelector( '.colorBtn' ); const body = d.querySelector( 'body' ); let test; /* declare a block scope local variable */ let random; /* declare a block scope local variable */
colorBtn.addEventListener('click', () => { num(); /* call the random number function */
if ( test === random ) { /* test for repeat of random number */ num(); }
body.style.backgroundColor = colors[ random ]; test = random; /* reset test value ready for the next button click */ }, false );
function num() { /* create a random number */ random = Math.floor( Math.random() * colors.length ); } }( document ));<i> </i>``
1. [url=https://developer.mozilla.org/en-US/docs/Glossary/IIFE]**[color=#069]Immediately Invoked Function Expression[/color]**[/url]
2. [url=https://humanwhocodes.com/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/]**[color=#069]It’s time to start using JavaScript strict mode[/color]**[/url]
@rpg2009Jul 19.2019 — #Each to their own, but my take
``<i> </i>(function( doc /* see bottom, this is the reference to document, abbreviated */ ) {
const
body = doc.body, /* document.body will do, no need to search */ colorBtn = body.querySelector ('.colorBtn'), /* let's start our search from the body as we now have it */ colors = [ '#F5534F', '#F3B900', '#313A87', '#1C213F', '#D96704', '#BF4904', '#8C0303', '#0D0D0D', '#98A665' ],
/* Make randomNum just a general random number function that returns a random value */
randomNum = function(num) {
return Math.floor( Math.random() * num ); };
let numColors = colors.length, /* Assigning length here, to save looking up the array's length property repeatedly */ newColor = randomNum(numColors), lastColor;
colorBtn.addEventListener('click', function() {
/* Using a while loop, just in case the same random number comes up more than twice */
while ( lastColor === newColor ) {
newColor = randomNum(numColors); }
body.style.backgroundColor = colors[ newColor ];
lastColor = newColor; /* store newColor for next time the button is clicked */
}, false );
}( document )) /* reference to document passed in from the global scope */<i> </i>`` Personally I think this is a bad example to be introducing IIFE's and discussions on scope and 'Use strict'. To a novice if that is what Raul is, it's just going to be confusing.
If he is struggling with random numbers, I think it would be best to go back to basics, and get an understanding of variable types, primitives, references — learn about functions, invocation, lexical scope, variable hoisting and so on.
What I see here, is Raul asking 'How do I ride a bike?', and the response is 'Watch me do wheelies and tricks, does that help?'
@rpg2009Jul 19.2019 — #lastColor is defined under newColor. When I say defined, added is probably a better description as I don't assign a value to it. It's value is 'undefined'
It is not until the event fires for the first time and newColor's value is assigned to it, that it gets a value. This means on the first firing of the event the while loop's condition lastColor === newColor will equal false.
As far as the setting of false on addEventlistener, I have to admit my DOM knowledge is pretty rusty — it's a habitual default setting.
A bit of a refresh is needed, but to give you a very rough idea, it is there to set whether the capture phase of the Event object is set. The capturing phase is when the event object trickles down from the parent to child nodes and picks up on fired events.
The other stage is known as bubbling, and this where the event bubbles up from the child node to it's parents.
You can try out this [(https://codepen.io/anon/pen/eqmqYd)] and experiment with changing the parent element's addEventListener capture setting to true or false. Also try adding or removing the stopPropagation on the child element. It's gives us some clues as to what is going on.
A few pointers for what it's worth. When stuck try isolating the problem code and keep it simple. console.log and console.dir can come in very handy when debugging. Obviously it's beneficial to read up and experiment.