Thank you for your example, it did help me.
Here's my working example with two buttons and two textareas.
That's what I need for a crypto app.
std/dom
import karax/vstyles
include pkg/karax/prelude
proc k(x: string): cstring =
cstring x
proc box(): VStyle =
style {StyleAttr.flex: k"0"}
proc hStack(): VStyle =
style {StyleAttr.display: k"flex", StyleAttr.flexDirection: k"row"}
proc vStack(): VStyle =
style {StyleAttr.display: k"flex", StyleAttr.flexDirection: k"column"}
var
textarea1Content = k"content1 "
textarea2Content = k"content2 "
proc textarea1MayBeChanged(ev: Event; n: VNode) =
textarea1Content = n.value
proc textarea2MayBeChanged(ev: Event; n: VNode) =
textarea2Content = n.value
# for onClickTestButton1
proc updateTextarea2 =
getVNodeById(k"textarea2").setInputText(textarea2Content)
proc onClickTestButton1(ev: Event; n: VNode) =
textarea2Content = textarea1Content & k"+"
discard setTimeout(updateTextarea2, 1)
# for onClickTestButton2
proc updateTextarea1 =
getVNodeById(k"textarea1").setInputText(textarea1Content)
proc onClickTestButton2(ev: Event; n: VNode) =
textarea1Content = textarea2Content & k"-"
discard setTimeout(updateTextarea1, 1)
proc drawApp(): VNode =
result = buildHtml(tdiv):
tdiv(style = {height: k"600px", width: k"500px"}):
tdiv(style = vStack()):
tdiv(style={marginTop: k"4%"}):
text k"Example using 'setInputText'"
tdiv(style={marginTop: k"4%"}):
text k"Both textareas are editable"
tdiv(style={marginTop: k"1%", marginBottom: k"2.5%", width:
k"28%"}):
button(onclick = onClickTestButton1):
strong: text k"Append '+' and show in other Textarea"
tdiv(style = box()):
textarea(id = k"textarea1", style = {fontSize: k"140%"},
rows = k"4", cols = k"50",
value = textarea1Content,
onblur = textarea1MayBeChanged)
tdiv(): hr(class="divider"): discard
tdiv(style={marginTop: k"1%", marginBottom: k"2.5%", width:
k"28%"}):
button(onclick = onClickTestButton2):
strong: text k"Append '-' and show in other Textarea"
tdiv(style = box()):
textarea(id = k"textarea2", style = {fontSize: k"140%"},
rows = k"4", cols = k"50",
value = textarea2Content,
onblur = textarea2MayBeChanged)
setRenderer drawApp
Run