如何在ClojureScript中创建Button元素？

Question

我正在尝试在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!)函数的文本结果？

Answer 1

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

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