Make a selected/clicked button active in JavaScript without Loop

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Darionas, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Darionas•340

  @DarionasPosted about 2 years ago

  @correlucas Thanks for quick response. I very appreciate it.

  0
• 

  Edis•1,220

  @edo979Posted about 2 years ago

  Hi.

  You done great job, well done. I read you code and shorten your function.

  let num;
  let prevButton;
  const numCont = document.getElementById('numCont');
  
  function myId(clicked_id) {
    num = document.getElementById(clicked_id).value;
  
    numCont.addEventListener('click', (e) => {
      const isButton = e.target.nodeName === 'BUTTON';
  
      if (!isButton) return;
  
      prevButton?.classList.remove('active');
  
      if (isButton) {
        e.target.classList.add('active');
      }
  
      prevButton = e.target;
    })
  }
  

  Of course you must add defer in your script tag. Read this:

  Marked as helpful

  0

  ---

  

  Darionas•340

  @DarionasPosted about 2 years ago

  @edo979 Thanks for feedback. I very appreciate it.

  0

  

  Darionas•340

  @DarionasPosted about 2 years ago

  @edo979 Code work perfectly. Thanks

  1