8

我正在尝试在 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 中的 write-action 上方）：

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

我在这里完全迷失了，我到处寻找任何解决方案，但似乎没有任何东西可以回答这个问题。我已经尝试将新的 set 属性包装在 (do) 中，也尝试过没有 (set!) 的版本，但没有任何东西可以产生所需的结果。

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

如果有人知道，奖金 Q：为什么该站点的示例仅返回第一项的结果而不是 innerText 而我的示例仅返回第二个（设置！）函数的文本结果？

4

2 回答 2

8

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

(let [div (.createElement js/document "DIV")]
    (.appendChild div (create-button)))
于 2013-04-20T15:52:05.740 回答
3

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

于 2015-02-18T18:22:55.510 回答