Fix the Event Listener Memory Leak
MediumChallenge 4 of 20
Fix the Event Listener Memory Leak
MediumThis code creates a button that changes color when clicked. However, it has a memory leak because event listeners are being added repeatedly. Fix the issue.
Challenge 4 of 20
50 XP
Community Solutions
DOMEventsMemory ManagementJavaScript
Exit ChallengeTest Cases
0/1 passingTest Case #1
Input: createColorChangingButton().init()
Expected: Button should change colors without adding multiple event listeners
Run tests to see results
solution.js
1
<span class="token keyword">function</span> createColorChangingButton() {
<span class="token keyword">const</span> colors = [<span <span class="token keyword">class</span>="token number">039</span>;red<span <span class="token keyword">class</span>="token number">039</span>;, <span <span class="token keyword">class</span>="token number">039</span>;blue<span <span class="token keyword">class</span>="token number">039</span>;, <span <span class="token keyword">class</span>="token number">039</span>;green<span <span class="token keyword">class</span>="token number">039</span>;, <span <span class="token keyword">class</span>="token number">039</span>;purple<span <span class="token keyword">class</span>="token number">039</span>;, <span <span class="token keyword">class</span>="token number">039</span>;orange<span <span class="token keyword">class</span>="token number">039</span>;];
<span class="token keyword">let</span> colorIndex = <span <span class="token keyword">class</span>="token number">0</span>;
<span class="token keyword">function</span> setupButton() {
<span class="token keyword">const</span> button = document.getElementById(<span <span class="token keyword">class</span>="token number">039</span>;color-button<span <span class="token keyword">class</span>="token number">039</span>;);
button.addEventListener(<span <span class="token keyword">class</span>="token number">039</span>;click<span <span class="token keyword">class</span>="token number">039</span>;, <span class="token keyword">function</span>() {
colorIndex = (colorIndex + <span <span class="token keyword">class</span>="token number">1</span>) % colors.length;
button.style.backgroundColor = colors[colorIndex];
});
}
<span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// This <span class="token keyword">function</span> is called every second to update the UI</span>
setInterval(<span class="token keyword">function</span>() {
setupButton();
}, <span <span class="token keyword">class</span>="token number">1000</span>);
<span class="token keyword">return</span> {
init: <span class="token keyword">function</span>() {
setupButton();
}
};
}Console
Run your code to see output here