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

Basics of one attribute + another for a derived attribute with Javascript on custom character sheet

March 22 (5 years ago)

Edited March 22 (5 years ago)
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator

I've been combing through the instructional articles for a very long time and it hasn't been helpful in setting something very basic up. All I'm trying to do is have two separate attributes get added together for a derived attribute. For example: agility + wit = reflex. Then for a few other derived attributes have a number add to that such as 4 + agility + wit. I haven't been able to figure out where to put the code, how to reference it, etc.


I've deduced that an input area should have either an id=" " or a name=" ", then that can be referenced later in the javascript, which should be at the end of the code. But not exactly sure how. 


The best I've been able to piece together so far is this...

<div>

<p>AG</p><input type="number" id="AG" value="0">

</input>

</div>


<div>

<p>WT</p>

    <input type="number" id="WT" value="0">

</input>

</div>


<div>

    

<P>Derived RF</P>

<input type="number" id="RF" value="0">

</input>

    

</div>






<script type="text/worker">


on("change:ag change:wt sheet:opened" , function() {

    getAttrs( ["Ag, Wt"], function(values) {

        

    }

    )


});


// ... etc




</script>

March 22 (5 years ago)
GiGs
Pro
Sheet Author
API Scripter

Look at the Building Character Sheets page on the roll20 wiki.

You cant use ids on roll20, any styling has to use class.

The attribute names are defined like "name="attr_NAMEHERE"

so you input would be

<input type="number" name="attr_AG" value="0" />

that said, you are better off using the attribute's full name, in lower case, so that would be:

<input type="number" name="attr_agility" value="0" />

Your sheet worker would then be (again, changing all attribute names into their full name in lower case):

on("change:agility change:wit sheet:opened" , function() {
    getAttrs( ["agility", "wit"], function(values) {
    // in the above line, note each attribute needs to have quotes around it        
        let ag = +values.agility ||0;
        let wt = +values.wit ||0;
        let total = ag + wt;    
        setAttrs({
            reflex: total
        });
    });
});


As a newcomer to sheet workers, you might find the following script useful: Multiversals

Scroll down to Wes's post to see how to use it, and how easy it is to perform stuff like this.

It's not the most efficient of scripts, but it's ideal for newbies.


March 22 (5 years ago)

Edited March 22 (5 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

Multiversals link added to the Sheetworker wiki article.

March 23 (5 years ago)
Daniel S.
Pro
Marketplace Creator
Sheet Author
Compendium Curator

Wow thanks so much for helping out! I spent a lot of time going through the Building a Character Sheet page, and subsequent linked pages, and as someone new to javascript, even with someone's help who does web coding, doing some starting java introductions, etc., it was really hard to make sense of. This helps a ton.

I can try to make more sense of this in the future, but that's enough to get a basic sheet up and running. YAY.

March 23 (5 years ago)
GiGs
Pro
Sheet Author
API Scripter

I'm glad it helped :) Good luck with your sheet!