Could not match type HTMLDocument with type Document

Help
#1

module Main
( logClick, main
)
where
I want to set a onclick event to a button. I found examples on the net. But all examples fail with the error: Could not match type HTMLDocument with type Document for doc. What is wrong and what can I do about it? Did I import the wrong 'Document"?

Error messages in Haskell give more info. In cases like this Haskell says: Expeced xxx but found yyy, which is more information then xxx does not match yyy.

import Prelude
import Data.Maybe (Maybe(…))
import Effect (Effect)
import Effect.Class.Console (log)
import Effect.Exception (throw)
import Web.DOM.CharacterData (toEventTarget)
import Web.DOM.Document (toNonElementParentNode)
import Web.DOM.Element (setAttribute)
import Web.DOM.NonElementParentNode (getElementById)
import Web.Event.EventTarget (addEventListener, eventListener)
import Web.Event.Internal.Types (Event)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toDocument)
import Web.HTML.Window (document)
import Web.HTML.Event.EventTypes (click)

logClick :: Event → Effect Unit
logClick _ = log “button clicked”

main :: Effect Unit
main = do
w ← window
doc ← document w
buttonMaybe ← getElementById “myButton” $ toNonElementParentNode doc

myEventTarget ← case buttonMaybe of
Nothing → throw “element with id ‘myButton’ not found.”
Just myButtonElem → pure $ toEventTarget myButtonElem

listener ← eventListener logClick

addEventListener click listener true myEventTarget

#2

Hello and welcome.

Yes the type errors are a bit different but overall I think they are similar - you probably just have to get used to it.

EDIT: Sorry did read the problem the wrong way and did not check versus the docs.

In this case you get a HTMLDocument from document so you need this version of toNonElementParentNode

I did not try this but from the types/docs it should work.

#3

Thank you. I tried to import toNonElementParsentNode from Web.HTML.HTMLDocument. The first error is gone, but now the compiler complains that toEventTarget needs a Element and not a CharacterData. Makes sense. In Pursuit I tried to find another version of toEventTarget. Unfortunately the list of candidates is very long. The result of (toNonElementParsentNode doc) goes in another a toEventTarget with both a lot canidates. If you’re new there are a lot of options for the types. How do I chose? Is there a Hoogle for purescript or a explanation of how the libraries are set up?

#4

“Hoogle” is build into pursuit - it should be the search bar above or you can add it as a search to your browser via https://pursuit.purescript.org/search?q=%s

For example if you search for Element -> EventTarget you should get the one from purescript-web-dom as the first result (toEvenTarget) and this should work with your myButtonElem - so it’s in Web.DOM.Element not in Web.DOM.CharacterData.

Yes it’s a bit tedious because you probably accepted what the auto-import feature gave you first - you have to look closely at the module there as it’s sorted alphabetically and not intelligent (there is no type search - it’s just the name).

#5

Thank you for your answer.
Progress! I’ve changed the code after using pursuit as Hoogle and now spago build, works with no errors and spago bundle-app creates index.js.
Including index.js in index.html does not give a correct working result. GetElementById cannot find the button while the button with the correct Id is in the html. Probably because the DOM is not initialized yet.But that’s another problem.