JordanMartinez/learn-halogen

log element's text?

swuecho opened this issue · 2 comments

Thanks for this great tutorial. Enjoy reading it!

https://github.com/JordanMartinez/learn-halogen/blob/latestRelease/src/02-Dynamic-HTML/06-Referring-to-Elements.purs#L39

handleAction :: HandleSimpleAction State Action
handleAction = case _ of
  PrintExample -> do
    -- Here, we use this reference to do something with the element
    H.getHTMLElementRef (H.RefLabel "my-button") >>= traverse_ \element -> do
      -- in this situation, we'll just state that the element exists
      -- and could be used here
      -- todo: get infor from element
      liftEffect $ log "We can now do something directly to the \
                         \button HTML element.

delete the line of H.getHTMLELEMENTRef still get the same behaviour. maybe log the element's text to show the element is the 'my-button' element?

I tried to get the text out of the button element, but seems not as easy as I thought.

Thanks for this great tutorial. Enjoy reading it!

Glad it's helping you.

delete the line of H.getHTMLELEMENTRef [and I] still get the same behaviour. maybe log the element's text to show the element is the 'my-button' element?

The fact that the same behavior occurs despite deleting that line does not surprise me at all. However, do you understand why it works that way?

I tried to get the text out of the button element, but seems not as easy as I thought.

Looks like there isn't a function innerText :: HTMLElement -> Effect String in purescript-web-html. If there was, you could then write:

handleAction :: HandleSimpleAction State Action
handleAction = case _ of
  PrintExample -> do
    -- Here, we use this reference to do something with the element
    H.getHTMLElementRef (H.RefLabel "my-button") >>= traverse_ \element -> do
      -- in this situation, we'll just state that the element exists
      -- and could be used here
      -- todo: get infor from element
      liftEffect do
        innerTxt <- innerText element
        log innerTxt

One way to get around that limitation is to write the FFI for that function here.

text <- textContent $ toNode element works. thanks.