Question

我正在尝试在ClojureScript中创建新元素，但它似乎不起作用。我将通过展示一个我找到here的示例来启动。

(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属性，这显然不起作用。您需要在DOM元素上使用appendChild方法将子元素插入其中。

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

Answer 2

Reagent提供了一种从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

如何在ClojureScript中创建Button元素？

2 个答案: