如何在ClojureScript中创建按钮元素？

我试图在ClojureScript中创建新元素，但它似乎没有工作。我将通过展示我发现的一个示例启动here。如何在ClojureScript中创建按钮元素？

(let [dom6238 (.createElement js/document "a")] 
    (.setAttribute dom6238 "href" "http://somelink") 
    (set! (.-innerText dom6238) "Text") 
    dom6238)

他们说皈依：

var dom54535 = document.createElement("a"); 
    dom54535.setAttribute("href", "http://somelink.com"); 
    dom54535.innerText = "Hello there"; 
return dom54535

如果我没有记错，这应该产生一个HTML片段，看起来像：

[:a.anchor.silly {:href "http://somelink.com"} "Text"]

我有这个在我的.cljs文件中：

(defn create-button [] 
    (let [a (.createElement js/document "a")] 
    (.setAttribute a "href" "http://somelink") 
    (set! (.-innerText a) "Text") 
    a)) 

(defn init [] 
    (let [a (.getElementById js/document "write-action") 
     b (.getElementById js/document "button-field")] 
    (set! (.-innerHTML a) 
      "field a") 
    (set! (.-innerHTML b) 
      (create-button))))

刚刚产生（按键区是在上面的HTML写操作）：

http://somelink/ 
field a

所以没有锚标记，只有文字。

什么，我试图做的是创建一个按钮，所以我有这样的代码：

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button") 
    (set! (.-innerHTML new-button) 
      "I'm a button") 
    new-button))

产生这样的输出：

[object HTMLInputElement] 
field a

所以，我玩大约一点，并删除返回值：

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button") 
    (set! (.-innerHTML new-button) 
      "I'm a button")))

它创建：

I'm a button 
field a

再次，我只有文字。

而且我必须要完成：

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button")))

其中仅返回文本：

button 
field a

这：

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button") 
    new-button))

产生以下：

[object HTMLInputElement] 
field a

我完全失去了这里，我已经搜查高和低的任何解决方案，也不会出现任何东西在那里，回答这个问题。我尝试在（do）中包装新的set属性，以及在没有（set！）的情况下尝试版本，但是没有任何内容会创建所需的结果。

问：如何创建一个可以使用ClojureScript点击的按钮？

红利Q如果有人知道：为什么来自站点的示例仅返回第一项的结果而不是innerText，而我的示例仅返回第二个（set！）函数的文本结果？

来源

2013-04-20 dizzystar

能否请您接受ANKUR的答案，如果你的作品？ – deterb 2013-04-20 17:38:43

@deterb当然，但这是非常好的形式？我的意思是，就像我要求你提高我的问题，如果这对你有帮助。我不想立即接受它的原因是因为我已经看到答案只是暗示，但从未详细说明，因为已经选择了另一个答案。因此，我更愿意等待几天才能选择答案。如果你看看我的历史，我发布的每个话题都有一个选择的答案。 – dizzystar 2013-04-20 19:43:42

有趣的观点，我喜欢你来自哪里。我看到足够的案例，人们对答案发表评论，然后不要选择它，因为我遇到了他们，所以我提出了提醒评论。我会在下一次配对的时候多一些。 – deterb 2013-04-22 03:07:59

您正在将DOM元素对象分配给另一个显然不起作用的元素的innerHTML属性。您需要在DOM元素上使用appendChild方法向其中插入子元素。

(let [div (.createElement js/document "DIV")] 
    (.appendChild div (create-button)))

来源

2013-04-20 15:52:05 Ankur

啊，我明白了。我之前使用过（.appendChild），但是通过将它包装在（set！）中来混淆语法。原来我可以追加到已经存在的div。完美的答案。 – dizzystar 2013-04-20 16:01:43

试剂提供了一种从CLJS创建html和js元素而无需始终调用JS命名空间的方法。我发现它更容易理解。我知道这是一个旧帖子，但它在许多搜索中弹出，这可以帮助人们学习。例如：

(defn your-button [] 
[:div 
    [:input.btn {:type "button" :value "Click Me!" 
     :on-click (your func here) }]])

CSS：

.btn { 

}

这里创建一个按钮，一个div里面，更多的信息：https://github.com/reagent-project/reagent

来源

2015-02-18 18:22:55 Jahsa

如何在ClojureScript中创建按钮元素？

回答

相关问题