Interactive Rating Component Project

Community feedback

• 

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  ahh, yea thats's a NodeList vs HTMLCollection data-structure issue. Basically both can be treated as an array but HTMLCollection needs to be coerced with Array.from() to which than you can chain a .forEach or other array-mapping methods. I generally am a document.querySelector() or .querySelectorAll() fella, which returns NodeList but, from what I can tell, no real obvious advantages so long as you're able to grab what your going for. Not at this sort of level at least.

  Glad you were able to refactor it with your approach, sounds good to me! The above info is mostly just a FWIW as maybe future benefit! 🙂

  Marked as helpful

  1

  ---

  

  Eric Alves•110

  @riickyallvesPosted about 2 years ago

  @jgreen721 Yes, I have noticed it when I looped it with a regular for loop, it logged values from 0 to 4, then 3 other HTML property values.

  The main difference between document.querySelectorAll() and any document.getElementsByX method, from what I have read, it's that the last one updates the list/array as the DOM gets updated. To update the list/array while using document.querySelectorAll() , you need to reload the page.

  1

  

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  @riickyallves

  ya how bout that. lol. Figured there's some differences (isn't there always!) but ya, what you said was right. Good to know! 😎

  1
• 

  P

  Justin Green•2,770

  @jgreen721Posted about 2 years ago

  Something like

  ` var btns = document.querySelectorAll('li');

  //returns you an array(like) structure of all your HTML li elements (in this case, all your buttons)

  btns.forEach(btn=>{
         btn.onclick=(e)=>grabScore(e);
  

  }) // looping thru and assigning each btn to a function that calls the grabScore function and passes // itself (event, event.target (the btn) to grabScore).

  function grabScore(e){
        userChoice = e.target.textContent;
  

  } // using the event object, you can access the HTML data and update/assign the userChoice

  `

  Sorry if all of that scrunches up when I send, throwing it in a text editor should make it more legible. Basically you're just grabbing your li buttons and assigning the function there similarly to how you targeted selected-result via document.someChainedMethod and were able to assign/adjust it with JS.

  Nice job though. Looks good and still works!

  Marked as helpful

  1

  ---

  

  Eric Alves•110

  @riickyallvesPosted about 2 years ago

  @jgreen721 Hello Justin. Thank you for your feedback. 🙏🏽

  I managed to make it work by adding an event listener to each li element using a regular for loop. I don't know why but getElementsByTagName array(like) and forEach didn't work well together.

  Happy coding!

  1