Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Need help with javascript for checkbox -> button enable implementation

Hey guys!

I am new here and I am currently editing a existing character sheet. I added a dice button in the repeating_spells list, for "targeted" spells.
Since not all spells have to be targeted, I wrote a javascript. Everytime the checkbox in a row is checked, the button should be enabled.

I tested the script in fiddle and it worked. So far so good, but it doesn't work in the sheet. As far as I read, I need a on(change) function, but I am not sure, which one.

The javascript is the following:

var inputs = document.getElementsByClassName('isaimed');
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', function() {
    if (this.checked) {
      this.parentElement.nextElementSibling.children[0].disabled = false;
      return;

    }
    this.parentElement.nextElementSibling.children[0].disabled = true;
  })
}


I hope you guys can help me with this, I am working on it since two days and I start to feel stupid.

Thank you very much for your help!

July 08 (7 years ago)
GiGs
Pro
Sheet Author
API Scripter

You cant use DOM-related code (document.getelementsbyclass, this.parentelement, etc) in character sheets. Roll20 strips such code from the character sheet for security and other reasons. 

You may not need to use javascript. If you have a button to enable, and a checkbox to enable it, you can probably set a css rule to hide or show the button (or activate or deactivate it) based on the isaimed value.

July 08 (7 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

This is just a pure html/css ask.

HTML

<input type='checkbox' class='display-filter' value='1'>
<div class='element-to-conditionally-display'></div>

CSS

.sheet-element-to-conditionally-display{
    display:none;
}
.sheet-display-filter:checked ~ .sheet-element-to-conditionally-display{
    display:block;
}


July 08 (7 years ago)

Edited July 08 (7 years ago)

Thank you guys. Seems like I skipped the part related to DOM. Now I really do feel stupid.

I will test it later. Thank you very much Scott!

Unfortunately if you check one checkbox, all boxes get checked. Even with other selectors in the css. Seems like I need to take a deeper look into this. Thanks anyway! :)

July 08 (7 years ago)
Jakob
Sheet Author
API Scripter


Dysadia said:

Unfortunately if you check one checkbox, all boxes get checked. Even with other selectors in the css. Seems like I need to take a deeper look into this. Thanks anyway! :)


If they're all siblings, you should probably use this CSS rule instead:

.sheet-display-filter:not(:checked) + .sheet-element-to-conditionally-display {
  display: none;
}
I condensed the above two rules into one and exchanged ~ for a +.

July 08 (7 years ago)

Edited July 08 (7 years ago)

Reproducing the same behaviour. As far as I understand, they are not siblings. But to be honest, I dont understand the parent - sibling - child system in a table. I just got the information regarding the javascript, that they are no siblings. Thanks for your patience with me, I will read the related stuff later. :)

After I rewrote the whole thing, it worked. Thank you so much guys. You are a lifesaver! Thanks for your time and your work. I really appreciate it!!!!