OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

QuerySelectorAll Not Working with Filepond

  • Thread starter Thread starter Dhanwanth Parameswar
  • Start date Start date
D

Dhanwanth Parameswar

Guest
I have this site that I'm creating that utilizes Filepond. I'm also trying to implement a custom cursor based off this codepen. What I'd like to happen is for the hoverTarget to select Filepond's action buttons and the underlined "Browse" text, I tried putting:

hoverTarget: document.querySelectorAll(".filepond--file-action-button") //button
hoverTarget: document.querySelectorAll(".filepond--label-action") //browse text

for the action button and browse text as their classes, but it was not picked up by querySelectorAll. I also put button and span tags into the function but still nothing. Note that when creating plain html <button/> and <span>test</span> elements, the query selector was able to pick those up. I was also able to select the root div for filepond:

hoverTarget: document.querySelectorAll(".filepond--root")

but still not able to select other divs with classes such as .filepond--file

I'm wondering if the query selector is unable to select the elements that I'm having problems with due to them being dynamic, but I'm unsure. I tried getElementsByClassName based on this answer, but it didn't work.

EDIT: Here's a codepen that represents my current situation!

Thanks for any help!

<p>I have this site that I'm creating that utilizes Filepond. I'm also trying to implement a custom cursor based off this <a href="https://codepen.io/mustafauncuoglu/pen/VwOembm" rel="nofollow noreferrer"><strong>codepen</strong></a>. What I'd like to happen is for the <code>hoverTarget</code> to select Filepond's action buttons and the underlined "Browse" text, I tried putting:</p>
<blockquote>
<p><code>hoverTarget: document.querySelectorAll(".filepond--file-action-button")</code> //button</p>
</blockquote>
<blockquote>
<p><code>hoverTarget: document.querySelectorAll(".filepond--label-action")</code> //browse text</p>
</blockquote>
<p>for the action button and browse text as their classes, but it was not picked up by querySelectorAll. I also put <code>button</code> and <code>span</code> tags into the function but still nothing. Note that when creating plain html <code><button/></code> and <code><span>test</span></code> elements, the query selector was able to pick those up. I was also able to select the root div for filepond:</p>
<blockquote>
<p><code>hoverTarget: document.querySelectorAll(".filepond--root")</code></p>
</blockquote>
<p>but still not able to select other divs with classes such as <code>.filepond--file</code></p>
<p>I'm wondering if the query selector is unable to select the elements that I'm having problems with due to them being dynamic, but I'm unsure. I tried <code>getElementsByClassName</code> based on this <a href="https://stackoverflow.com/a/18735248/17479788">answer</a>, but it didn't work.</p>
<p><strong>EDIT: Here's a <a href="https://codepen.io/Dhanwanth-Parameswar/pen/jOoxGKb" rel="nofollow noreferrer"><em>codepen</em></a> that represents my current situation!</strong></p>
<p>Thanks for any help!</p>
 

Latest posts

Online statistics

Members online
0
Guests online
2
Total visitors
2
Ads by Eonads
Top