如何在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中創建按鈕元素？

回答

相關問題