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

Reply via email to