CSS Flexbox & Vanila JS

Community feedback

• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hello Aurel!

  I am going to leave you your code modified to achieve the same functionality but with a for loop and using the querySelectorAll as you had in mind. I just added the loop and removed the listener events for the buttons and also removed the buttons that were located by the "id"

  const submitBtn = document.getElementById('submitBtn');
  const cardItems = document.querySelector('.card-items');
  const cardThankYou = document.querySelector('.card-thank-you');
  const ratingButtons = document.querySelectorAll('.card-thank-you');
  submitBtn.disabled = true;
  
  submitBtn.onclick = () => {
    cardItems.style.display = 'none';
    cardThankYou.style.display = 'flex';
  };
  
  const allBtns = document.querySelectorAll('.ratingBtn');
  const span = document.getElementsByTagName('span')[0];
  
  for (let btn of allBtns) {
    btn.addEventListener('click', () => {
      span.innerHTML = btn.innerHTML;
      submitBtn.disabled = false;
    });
  }
  

  I would like you to try it and tell me if it works correctly for you.

  Cheers!

  Marked as helpful

  2

  ---

  

  Aurel•290

  @Aur71Posted over 2 years ago

  @Enmanuel-Otero-Montano Works well, thanks

  1

  

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  @Aur71 Looks to me like you're going to have to remove the classes to remove the button colors, add that.

  0
• 

  szam•800

  @k-stopczynskaPosted over 2 years ago

  Hi!

  According to your question: select them by const buttons = document.querySelectorAll('.buttons-class'). You will get the Node-list of them. Add event listener to all of them and write a function which on the click:

  1. removes class active from all the buttons
  2. on the button that is an event target will add class active
  3. will provide data for your span dynamically, e. g const spanValue = e.target.innerContent; and then you can use it like this ${spanValue}

  You can also check my solution with different approach. Hope this helps:)

  You did very good on the layout!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Aurel•290

  @Aur71Posted over 2 years ago

  @k-stopczynska Thanks, it was so obvious yet i didnt think of this :)

  0