如何使按钮 alert() 成为文本框的文本？

Question

在《氮素概论》中有这样一个例子：

body() -> 
    #panel { style="margin: 50px;", body=[
        #h1 { text="My Page" },
        #label { text="Enter Your Name:" },
        #textbox { },
        #button { id=mybutton, text="Submit" }
    ]}.

然后他们让你添加一个 alert()'s hello 的事件：

body() ->
    [
        #button { text="Submit", actions=[
          #event{type=click, actions=#alert { text="Hello" } 
        ]}
    ].

所以我想出了这个：

%% -*- mode: nitrogen -*-
%% vim: ts=4 sw=4 et
-module (my_page).
-compile(export_all).
-include_lib("nitrogen_core/include/wf.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/bare.html" }.

title() -> "Hello from my_page.erl!".

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert('hello')"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

本指南会向您展示如何 alert() 在文本框中输入的名称，这似乎很自然。我试过了：

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert(obj('mytextbox').text)"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

...但是 alert() 说 undefined。我什至找不到obj() 函数的文档。

我也尝试使用纯 js 进行操作，因为the guide says：

什么是氮作用？

一个动作可以是 Javascript，也可以是一些渲染成的记录 Javascript。

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert(document.getElementById('mytextbox').innerHTML)"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

但是，没有弹出警报（）。有人可以帮忙吗？

编辑： 好吧，当我查看页面源时，html看起来像这样：

<input type="text" class="wfid_temp182655 wfid_mytextbox textbox" value="" />
<input type="button" value="Submit" class="wfid_temp182684 wfid_mybutton button" />

我注意到，即使按钮和文本框记录有一个 id 字段，Non 也没有为这些 html 元素设置 id 属性——这对我来说毫无意义。

Answer 1

根据the docs：

事件操作 - #event {}
...
在 Javascript 中，您可以使用 obj('id') 其中 id 是一个 氮元素。您也可以使用obj('me') 来引用目标 当前操作。

使用value 属性（而不是textContent 或innerHTML 属性——是的，我的js 已经生锈了！）与obj('mytextbox') 一起使用：

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert( obj('mytextbox').value )"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id=mybutton}
    ]}.

在其他地方，the docs 说：

trigger -（原子）将触发此操作的 Nitrogen 元素的 id。自动设置。

target - (atom) 被 obj('me') 引用的 Nitrogen 元素的 id。自动设置。

所以，如果我将目标设置为“mytextbox”，那么我应该可以写：

"alert( obj('me').value )"

但是当我尝试以下代码时没有弹出警报（）：

%% -*- mode: nitrogen -*-
%% vim: ts=4 sw=4 et
-module (my_page).
-compile(export_all).
-include_lib("nitrogen_core/include/wf.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/bare.html" }.

title() -> "Hello from my_page.erl!".

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        target=mytextbox,
        actions="alert( obj('me').value )"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id=mybutton}
    ]}.

如果我尝试一下：

actions="alert( obj('me') )"

仍然没有弹出 alert()。