Why is my below code for IIFE only working once with the clickEvent

javascript click event firing multiple times
jquery on click
javascript onclick
addeventlistener
jquery click event firing twice
preventdefault
jquery prevent multiple click events
jquery multiple click events on same element

Below is a link to a small project I thought of and created today. I can not get the button to work more than once using an IIFE.. I have figured it out without an IIFE, but my understanding is it is best to make code private... Any suggestions would be greatly appreciated.

https://codepen.io/kclute627/pen/dgPyxq

let randomColor = (function(){

// generate a random number 
let randNum= () => Math.floor(Math.random() * 10);
// invoke random number 6 times to create hexcolor
let randColor = parseInt([randNum(), randNum(), randNum(), randNum(), 
randNum(), randNum()].join(''))

const hexColor = (`#${randColor}`)

return hexColor;

})();

const makeColor = (function() {
let color1 = randomColor;
console.log(color1);
let setupEventListener = function(){ 

    document.querySelector('.final-button').addEventListener('click', 
function(){
        document.querySelector('.main-box').style.backgroundColor = color1;
    });
};

setupEventListener();

})();

randomColor is only ever assigned once when the file is first loaded. let color1 = randomColor; just grabs the value of randomColor, it's not running your IIFE again to get a new color.

randomColor should be a function (not a reference to the return value of an IIFE) if you want it to run again and generate a new color. You can scope this whole thing with an IIFE wrapping it all if you want and put randomColor in some kind of scope if you don't want it on the global scope.

It's worth noting that your click handler is running every time you click, but the color is not changing because randomColor is not changing.

jQuery click events firing multiple times, To make sure a click only actions once use this: stopImmediatePropagation() Works great in situations when you just want your event to be handled eg $("​ctrl").on('click', somefunction) if this piece of code is executed every time The below code worked for me in my chat application to handle multiple  Jquery code only runs once with .click event Hello, I'm somewhat new to JS and everything, right now I'm using Jquery to have some functionality on a website that I want to make. I have a button that from a list of objects selects a new one; I managed to make the button work but it only works once; I think it's something related to my first

On the click event only the function given to addEventListener as the second argument will be invoked. The variable color1 is assigned outside of this function so the value will stay the same.

Handling Events :: Eloquent JavaScript, Some programs work with direct user input, such as mouse and keyboard A better mechanism is for the system to actively notify our code when an event occurs. Event listeners are called only when the event happens in the context of the Every time you click the document, it adds a dot under your mouse pointer. The Click event is raised when the Button control is clicked. This event is commonly used when no command name is associated with the Button control (for instance, with a Submit button). For more information about handling events, see Handling and Raising Events.

Just an extended comment on the randomColor function.

I'm not a fan of using a function expression where a function declaration is indicated. The assignment still creates a global variable, doesn't save any characters and introduces issues not present with declarations.

Within the the function, there is another function expression that is called 6 times, then an array created and joined, and finally the use of parseInt which will introduce sporadic errors (it will remove leading zeros so the value no longer has 6 digits) and is entirely unnecessary considering you want a string result.

Lastly, the resulting value is really decimal, as it will only contain digits from 0 to 9.

It may be unfashionable to use loops, but they are really fundamental and should be at least considered where they are indicated. E.g.:

// Generate random 6 digit hex value where digits are 0 - 9
function randomColor() {
  var color = '#';
  for (var i=0; i<6; i++) {
    color = color + Math.floor(Math.random() * 10);
  }
  return color;
}

console.log('Decimal color: ' + randomColor());

The Great Gilly Hopkins, Next, create a T-Chart like the one below and complete the questions for both Question My Home State: State for Comparison: What kinds of plant life is unique to the state? 7. What interesting historical event has taken place in this state? Click on item CC2504 – The Great Gilly Hopkins • Enter pass code CC2504D  Answer: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page.

What are event handlers? - MDN, This page focuses on how the latter work. event handler for a particular event (​such as click ) for a given object in When an event occurs that applies to an element, each of its event be used to register a handler for an event directly within the HTML code. Content is available under these licenses. Note that you have used jQuery's click method, it will emit both dom's mouse click event and jquery's click event. Then both jquery's click Event and dom's mouse click event are propagated to the span element and its onclick listener is triggered twice hence it alert twice . check this demo to figure it out

<input type="button">, addEventListener() is then used to establish a function that will be run when click events occur on the button. The machine is stopped. Adding  To get your program to work that way, you add a Click event handler that changes the color of the label that is chosen. To add a click event handler to each label. Open the form in the Windows Forms Designer. In Solution Explorer, choose Form1.cs or Form1.vb. On the menu bar, choose View > Designer. Choose the first label control to select it.

.live(), .live( events, handler )Returns: jQueryversion deprecated: 1.7, removed: 1.9 A string containing a JavaScript event type, such as "click" or "keydown. A plain object of one or more JavaScript event types and functions to execute for them. (but see below for more effective and performant ways to attach delegated event​  Based on the type of event, you need to put the code in the relevant object. For example, if it’s a worksheet related event, it should go in the code window of the worksheet object. If it’s workbook related, it should go in the code window for a workbook object. In VBA, different objects – such as Worksheets,

Comments
  • I see what you are saying any suggestion as to run the IIFE again when the button is clicked?
  • Well, you would just turn it into a function instead of have it run an IIFE. If you want the function scoped, you can create a class and add this as a method, or put it in a variable on the global scope (like how jQuery or other libraries exposes themselves).