dom module

ziggy

(Posted 2014) [#1]

I would love to be able to use the addEventListener with the dom module. Anyone has a way to connect events (click etc...) with monkey functions?

I've got this ultra simple sample:

Import dom

Function Main()
	Local but:= document.createElement("input")
	but.setAttribute("type", "submit")
	but.setAttribute("value", "Do it!")
	but.setAttribute("onclick", "bb_untitled_1_Clicked();");
	document.body.appendChild(but)
	Local a:= False
	If a = True
		Clicked
	EndIf
End

Function Clicked()
	window.alert("Clicked!")
End

But, connecting events using this:
but.setAttribute("onclick", "bb_untitled_1_Clicked();");
Is quite nasty. Is there any way to properly connect HTML gui events with Monkey code in an elegant way? How does the addEventListener works?

nikoniko

(Posted 2014) [#2]

ziggy wrote:

I've got this ultra simple sample:

Identifier 'document' not found

other dom's examples work.

ziggy

(Posted 2014) [#3]

document is a global inside the dom module, but you should be coding for html5 and not sure if it's only on current dev branch of official Monkey.

confirmed it's there, not sure why you don't have it. It should be an external Global of kind HTMLDocument

ziggy

(Posted 2014) [#4]

Got it:

Import dom
Function Main()
	Local myButton:= document.createElement("input")
	myButton.setAttribute("type", "submit")
	myButton.setAttribute("value", "Click me!")
	document.body.appendChild(myButton)
	
	Local clicker:= New Clicker
	myButton.addEventListener("click", clicker, True)
	
	'This is not a game, we romve the canvas:
	Local elem:= document.getElementById("GameCanvas")
	If elem <> Null Then
		elem.parentNode.removeChild(elem)
	EndIf
End

Class Clicker Extends EventListener
	Method handleEvent(event:Event)
		window.alert("Button clicked!")
	End
End