FixCode

Fix the Event Listener Memory Leak

Medium

Challenge 4 of 20

Fix the Event Listener Memory Leak

Medium

This 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 Challenge

Test Cases

0/1 passing

Test Case #1

Input: createColorChangingButton().init()

Expected: Button should change colors without adding multiple event listeners

Run tests to see results

solution.js

<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();
    }
  };
}

function createColorChangingButton() {
  const colors = ['red', 'blue', 'green', 'purple', 'orange'];
  let colorIndex = 0;
  
  function setupButton() {
    const button = document.getElementById('color-button');
    
    button.addEventListener('click', function() {
      colorIndex = (colorIndex + 1) % colors.length;
      button.style.backgroundColor = colors[colorIndex];
    });
  }
  
  // This function is called every second to update the UI
  setInterval(function() {
    setupButton();
  }, 1000);
  
  return {
    init: function() {
      setupButton();
    }
  };
}

Console

Run your code to see output here

Previous ChallengeNext Challenge

Exit