Why isn't my Javascript DOM functioning correctly in Shopify?

Shopify Discussion
1

Hi!

I am trying to get some javascript working on a page that’s custom html, css and js.

When I try this code creating an index file everything works, but in Shopify it doesn’t.

The “placeholder” (label) text is supposed to go up when focusing input (works) and then get removed when you start typing (doesn’t work). The text just goes back down on top of the inputted text.

I don’t understand why it’s not working.

HTML in question:

CSS in question:

.placeholder-art {
  color: #F5F5F7;
  position: absolute;
  top: 65px;
  left: 40px;
  transition: 0.3s;
  pointer-events: none;
}
input[type=text]:focus + .placeholder-art {
  top: 50px;
}

Working up until this point, js that isn’t working in Shopify, but works elsewhere:

const labelElement = document.querySelector(".placeholder-art");
const inputElement = document.querySelector("input");
inputElement.addEventListener("keydown", () => {
  labelElement.style.display = "none";
});

You can find it here: https://galleryofai.com/pages/showcase-your-own-art

Note: This code is only for the first input field, the rest are similar

(Also border around input field is way bigger than specified when focused, still trying to get that smaller as well, but facing similar problems where it works in index file but not Shopify)

Any ideas what I could be doing wrong or not understanding?

Thanks

2

Hi @IbrarNaseer

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

if you want to do the same as my video you can change your code with mine

https://www.loom.com/share/a78e4474d70042f8b74dc3b611c26891

const labelElement = document.querySelector(“.placeholder-art”);

const inputElement = document.querySelector(“#brand_name”);

inputElement.addEventListener(“keydown”, () => {

labelElement.style.display = “none”;

});

inputElement.addEventListener(“blur”, () => {

if(!inputElement.value){

labelElement.style.display = “block”;

}

});

Best Regards;

PageFly

1 Like
3

Thank you soo soo much! This was exactly what I needed!

4

you are welcome, I glad when can help you