Question

I have a strange behaviour with the code below:

function update(txt, _)
{
    #text = <>{txt}</>
    #data = <>{txt}</>
}

command = <a onclick={update("test1", _)}> change text1 </a> <+>
      <a onclick={update("test2", _)}> change text2 </a>    


content = <textarea style="width:30%;" rows=1 id=#text > filename </textarea>
    <textarea style="width:100%;" rows=30 id=#data > This is a text area </textarea> 



Server.start(
   Server.http,
   [
     {page: function() {command <+> content}, title: "test" }
   ]
)

When I clik on the links “change text1” or “change text2”, the text is updated in the two textareas, but as soon as I edit the value of one of these textareas, the update failed when I clik on the links.

Why ?

Answer 1

i think this is because once you have edited a textarea, the browser considers the “value” attribute of the textarea, and not the HTML content inside the textarea.

So in order to work, you should :

function update(txt, _)
{
    Dom.set_value(#text, txt)
    Dom.set_value(#data, txt)
}