How to create Button Elements in ClojureScript?

Question

I'm trying to create new elements in ClojureScript and it doesn't appear to be working. I'll start up by showing an example that I found here.

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

Which they say converts to:

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

If I'm not mistaken, this should produce an HTML snippet that looks like:

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

I have this in my .cljs file:

(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))))

Which just produces (button-field is above write-action in the HTML):

http://somelink/
field a

So there is no anchor tags, only text.

What I am attempting to do is create a button, so I have this code:

(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))

Which generates this output:

[object HTMLInputElement]
field a

So, I play around a bit and remove the return value:

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

Which creates:

I'm a button
field a

Once again, I have only text.

And I have to be complete:

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

Which only returns the text:

button
field a

And this:

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

Produces this:

[object HTMLInputElement]
field a

I'm completely lost here and I've searched high and low for any solution and there doesn't appear to be anything out there that answers this question. I've tried wrapping the new set attributes in (do) as well as as trying out versions without (set!) but nothing is creating the desired result.

Q: How do I create a button that can be clicked using ClojureScript?

Bonus Q if anyone knows: Why does the example from the site only return the result of the first item and not innerText while my examples only return the text results of the second (set!) functions?

@deterb Sure, but is that really good form? I mean, it's like me asking you to upvote my question if it was helpful to you. The reason I didn't want to accept it right off is because I've seen answers simply hinted at but never elaborated on because another answer was already chosen. I prefer to wait a few days before choosing an answer because of this. If you look at my history, every topic I've posted has a chosen answer. — dizzystar
– dizzystar, Commented Apr 20, 2013 at 19:43
Interesting perspective, I like where you are coming from. I see enough cases where people comment on an answer and then don't select it that I put up a reminder comment as I come across them. I'll give the next pairing more time then. — deterb
– deterb, Commented Apr 22, 2013 at 3:07

Ankur · Accepted Answer · 2013-04-20 15:52:05Z

8

You are assigning a DOM element object to innerHTML property of another element which is obviously not going to work. You need to use appendChild method on the DOM element to insert a child element into it.

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

answered Apr 20, 2013 at 15:52

Ankur

33.7k2 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dizzystar Over a year ago

Ah, I see now. I was using (.appendChild) before but was messing up the syntax a bit by wrapping it in (set!). Turns out I can just append to the div that already exists. Perfect answer.

Jahsa · Accepted Answer · 2015-02-18 18:22:55Z

3

Reagent provides a way to create html and js elements from CLJS without calling the JS namespace all the time. I found it much easier to understand. I know this is an old post but it pops up in many searches and this could help out people learning. Example:

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

CSS:

.btn {

}

Creates a button inside a div, more info here: https://github.com/reagent-project/reagent

answered Feb 18, 2015 at 18:22

Jahsa

456 bronze badges

Collectives™ on Stack Overflow

How to create Button Elements in ClojureScript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related