Closure Failure

Size
1,933 Kb
Views
28,336

How do I make an closure failure?

This is a fairly common pattern in a web page. Unfortunately, it does not work the way we expect. Instead of the paragraphs reporting 1, 2, 3, 4, or 5 when clicked, they always report 5 which was the value of p when exiting the for loop. The for loop exit occurs long before the click of the paragraph.. What is a closure failure? How do you make a closure failure? This script and codes were developed by Mobile Application Design-Development on 10 August 2022, Wednesday.

Closure Failure Previews

Closure Failure - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Closure Failure</title>
</head>
<body> <h2>Click on one of the five paragraphs below to see the number of the paragraph</h2>
<h3>The Number FAILS because of closures</h3> <script src="js/index.js"></script>
</body>
</html>

Closure Failure - Script Codes JS Codes

(function clickPara ( ){ for(var p=0; p < 5; p++){ var para = document.createElement("p"); para.innerHTML = "Some text"; document.body.appendChild(para); para.addEventListener("click", function(ev){ alert(p); //this creates the closure. //the variable p is now stored as something to reference later on //when the user clicks any paragraph //we are accessing the loop variable p }) } //this will override the last value of p (5) with 723. //p = 723; //if we comment out the above line then p will be 5, regardless of the paragraph
})();
//instead of making this an IIFE we could just call the function
//clickPara();
Closure Failure - Script Codes
Closure Failure - Script Codes
Home Page Home
Developer Mobile Application Design-Development
Username mad-d
Uploaded August 10, 2022
Rating 3
Size 1,933 Kb
Views 28,336
Do you need developer help for Closure Failure?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mobile Application Design-Development (mad-d) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!