e.target not recognising element

Question

I am trying to create a size select function with each size pulling through on a separate tile as below: [size tiles][1] [1]: https://i.stack.imgur.com/VSzDy.png

The issue I am having is that if the tiles have more than one of the clock images my code doesn't recognise the clock image on the second tile.

My code looks like this:

          const dropDown = (): string =>
            `<div class = "selectWrapper">
       <div class="numberWrapper">${options
         .map(
           (option) =>
             `${
               option.stockStatus === 'OUT_OF_STOCK'
                 ? `<button class="notAvailable" ><p class = "size">${option.value}</p></button>`
                 : option.stockStatus === 'LOW_STOCK'
                 ? `<button class="selectSize" ><svg class = "low" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#FFBF00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M12 5.17999V12L15.04 15.04" stroke="#FFBF00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg><p class = "size">${option.value}</p></button>`
                 : `<button class="selectSize" ><p class = "size">${option.value}</p></button>`
             }`
         )
         .join('')}
       </div>
       </div>
       </div>
       </div>`

          const selected = () => document.querySelector('.selectWrapper')

          const getOption = (): void => {
            selected()!.addEventListener('click', function (e) {
              const target = e.target as HTMLElement
              console.log(target)
              const selectedLength = (e.target as HTMLElement).textContent
                ?.length
              const selectedVal = (e.target as HTMLElement).textContent
              // const valSelectedTeens = selectedVal?.substring(
              //   selectedVal.length - selectedLength!
              // )
              const valSelected = selectedVal?.substring(
                selectedVal.length - selectedLength!
              )

              for (let i = 0; i < sizeDropDownVal()!.length; i++) {
                const originalValue = sizeDropDownVal()![i] as HTMLOptionElement

                if (target.contains(document.querySelector('.low'))) {
                  const childValLength = target.children[1].textContent?.length
                  const childValSelected = selectedVal?.substring(
                    selectedVal.length - childValLength!
                  )
                  console.log('yes')
                  if (
                    originalValue.innerText.includes(childValSelected as string)
                  ) {
                    originalValue.selected = true
                    sizeDropDownVal()!.dispatchEvent(new Event('change'))
                  }
                } else {
                  console.log('no')
                  if (originalValue.innerText.includes(valSelected as string)) {
                    originalValue.selected = true
                    sizeDropDownVal()!.dispatchEvent(new Event('change'))
                  }
                }
              }
            })
          }

          getOption()
        })

For some reason if I click on the second tile with the clock image my console logs 'no' which would imply that the clock does not exist on that tile when in fact it does. I hope this makes sense and someone will be able to help!

Many thanks in advance.

Answer 1

I haven't run all the code, but I think this part of your if statement is the culprit:

target.contains(document.querySelector('.low'))

document.querySelector() is going to get the first instance of that selector within the whole document, not the target element. In this case, the first instance of that selector is the first button with it in, causing the second button to fail.

Try target.querySelector('.low') instead?