Article preview component, HTML, CSS, JAVASCRIPT

Community feedback

• 

  jnpRoF•20

  @jnpRoFPosted 22 days ago

  Hi.

  Yh, you wouldn't be able to use document.getElementsByClassName to select only one element when multiple(in your case two) elements share the same class name. You also wouldn't be able to use document.querySelector because when two or more elements have the same class name and you want to select them in your JS file you use document.querySelectorAll (which you used) or document.getElementsByClassName.

  After using document.querySelectorAll if you log btnShare to your console, you'll see that you now have a NODELIST which is similar to an ARRAY but is different in that you can't use array methods with it except the forEach method like you used.

  So whenever a class name is shared with two or more elements you have a NODELIST(if you selected ALL using document.querySelectorAll) or an HTMLCollection(if you selected ALL using document.getElementByClassName) and if you try to add an eventListener to it, it wouldn't work simply because you should add an eventListener to a SINGLE element, it doesn't make sense to tell an ARRAY or a NODELIST or an HTMLCOLLECTION to listen for a click event,does it?

  Using document.querySelector catches only the first element if there are multiple elements sharing that class name, normally it's only used for single elements. To select ALL elements having the same class name you use document.querySelectorAll or document.getElementsByClassName and loop through like you did using loops or any loop-like method like forEach.

  NODELISTS and HTMLCOLLECTIONS can also be converted to an array using Array.from or by using the spread operator like this.

  const newBtnShare = [...btnShare]

  or using Array.from()

  const newBtnShare= Array.from(btnShare)

  newBtnShare is now an array and you can use your array methods.

  Happy coding 🥂

  Marked as helpful

  0

  ---

  

  Ataize Feitosa•200

  @AtaizePosted 21 days ago

  @jnpRoF, Thanks for the explanation.

  0

  

  jnpRoF•20

  @jnpRoFPosted 21 days ago

  @Ataize sure.

  0
• 

  P

  Donta Smith•40

  @donta514Posted 22 days ago

  Hello there and nice work!

  A quick recap for you on relative and absolute path that may help is to remember that relative positioning is like static but differs in that it allows you to open up the top, right, bottom and left properties allowing you to adjust the element within the natural flow of the page. Absolute however completely ignores the flow of the page and is instead pulled out allowing you to adjust the element relative to its containing block. So I would recommend relative positioning for the arrow and share button. Hope this helps!

  Marked as helpful

  0

  ---

  

  Ataize Feitosa•200

  @AtaizePosted 21 days ago

  Thanks for the suggestion. I've already made the adjustment.@donta514

  0