0

Some of the forms are created and generated by dynamics.com. I try to overrule the styling by manipulating the DOM. Locally it's working, but on the server somehow the JavaScript is not working.

My js file is positioned just before the closing <body> tag.

In the DOM the HTML is rendered like below:

<div data-editorblocktype="Field-checkboxList" style="">
  <div class="lp-form-field" data-required-field="false">
    <label class="lp-ellipsis" for="29239e83-42a6-ea11-a812-000d3ad7c1cb" title="">The title</label>
      <input class="lp-form-fieldInput" type="checkbox" value="125810000">
  </div>
</div>

I tried:

window.onload = function() {
  document.querySelector("div[data-editorblocktype=Field-checkboxList] .lp-ellipsis").classList.add('bg-red');
}

But than I get this error:

Uncaught TypeError: Cannot read property 'classList' of null

With jQuery I tried the following:

if (window.jQuery) {
     $('div[data-editorblocktype=Field-checkboxList] .lp-ellipsis').addClass('text-orange-500', window.parent.document);

Any ideas how to get this working?

meez
  • 3,783
  • 5
  • 37
  • 91
  • If it is returning null, then either your selector is wrong, or the elements do not exist yet. – Taplar Jul 08 '20 at 19:02
  • But really, there should be an easier way to do this. Defining your own ` – Taplar Jul 08 '20 at 19:04
  • Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Heretic Monkey Jul 08 '20 at 19:15
  • @Heretic Monkey that makes sense. So in my case what would be the best option? I can't move my script easily because I build all with webpack etc? – meez Jul 08 '20 at 19:58
  • @Taplar I started overriding the CSS but there where so much classes and styling that manipulating the existing ones is easier in this case I think. – meez Jul 08 '20 at 20:00
  • I don't see any options listed, and you don't mention the use of webpack in your question. All my comment was saying is that you need to check when your code is loaded and what your selector is selecting (if indeed anything is matched). Since you've not shared the HTML structure or where the code is loaded, we can't help with either question. You'll need to do some work to figure it out, or give more information into the specifics. – Heretic Monkey Jul 08 '20 at 20:04
  • @Heretic Monkey I update my question with some HTML. – meez Jul 08 '20 at 20:17
  • When you override css, you do not have to do a complete replacement. You can change just the options you want. – Taplar Jul 08 '20 at 22:21
  • @Taplar but I use Tailwind, so it's more consistent (and handy) to replace the classes. That should be possible isn't it? But somehow it's still blocked. Nothing is changing. I don't know what to do? – meez Jul 09 '20 at 04:53

0 Answers0