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

Content on Change to Input

July 15 (5 years ago)
Axel
Pro
Sheet Author

Hey! I'm looking for some help with a project.

I want to have an element with content that displays the value of an <input> or <textarea>.

I'm still a novice script-kid so I need clear examples and I've looked at using something like this, but can't get it to work on my sheet.

Is this possible? Should I use some other method?

July 15 (5 years ago)
Finderski
Pro
Sheet Author
Compendium Curator

Sorry, won't be able to do it that way...we can't use JS to affect the DOM.  That doesn't mean it's not possible, just may need to happen differently.

So, can you give a more detailed example of what you want to do? For example:

If a player enters "x" in field "y", I'd like to display "z" on the character sheet in a non-editable fashion.

But really, the more specificity the better...especially if you can share the HTML you've put together already with the different fields and where you'd like to display something. It's possible it may not require any JS, and only CSS and/or maybe not even that. :)

July 15 (5 years ago)
Axel
Pro
Sheet Author

Alright then.

What I want is to model what the Stars Without Number sheet does, among others. It has an "edit mode". So it shows textboxes where you can enter your info, but when you switch, the values of those textboxes are instead displayed in fixed elements. I want to do something like that.

What I was planning was to have a value from an <input> or <textarea> be displayed as content in a <div> that fits the whole string. So your example is very close to what I'm looking for.

If a player enter "x" in editable field "y", I want to display "x" in non-editable element "z", if "s" is checked.

July 15 (5 years ago)
Jakob
Sheet Author
API Scripter

Use a span with the same name as the attribute, e.g.

<input type="text" name="attr_foo"/>

... somewhere else ...
<span name="attr_foo"></span>


July 15 (5 years ago)
Axel
Pro
Sheet Author

It's really that easy? Wow! Thanks!

July 15 (5 years ago)

Edited July 15 (5 years ago)
Axel
Pro
Sheet Author

If the input is actually a <textarea> though, is it possible to preserve the line-breaks? They just turn out as spaces.

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

Yes, you just need to style the span copy with white-space:pre-wrap;

July 15 (5 years ago)
Axel
Pro
Sheet Author

That's wonderful! This looks like I can make it work.

So great to have such quick help from the community. Thanks a bunch!