Step 5: Setup the UI in Scala.js

sjrd · sjrd · commit 362f8f2af040 · 2021-10-07T10:56:01.000+02:00
diff --git a/scalajs-tutorial-fastopt.html b/scalajs-tutorial-fastopt.html
@@ -5,10 +5,6 @@
     <title>The Scala.js Tutorial</title>
   </head>
   <body>
-    <button id="click-me-button" type="button" onclick="addClickedMessage()">
-      Click me!
-    </button>
-
     <!-- Include Scala.js compiled code -->
     <script type="text/javascript" src="./target/scala-2.13/scala-js-tutorial-fastopt/main.js"></script>
   </body>
diff --git a/src/main/scala/tutorial/webapp/TutorialApp.scala b/src/main/scala/tutorial/webapp/TutorialApp.scala
@@ -1,12 +1,23 @@
 package tutorial.webapp
 
-import scala.scalajs.js.annotation.JSExportTopLevel
-
 import org.scalajs.dom
 import org.scalajs.dom.document
 
 object TutorialApp {
   def main(args: Array[String]): Unit = {
+    document.addEventListener("DOMContentLoaded", { (e: dom.Event) =>
+      setupUI()
+    })
+  }
+
+  def setupUI(): Unit = {
+    val button = document.createElement("button")
+    button.textContent = "Click me!"
+    button.addEventListener("click", { (e: dom.MouseEvent) =>
+      addClickedMessage()
+    })
+    document.body.appendChild(button)
+
     appendPar(document.body, "Hello World")
   }
 
@@ -16,7 +27,6 @@ object TutorialApp {
     targetNode.appendChild(parNode)
   }
 
-  @JSExportTopLevel("addClickedMessage")
   def addClickedMessage(): Unit = {
     appendPar(document.body, "You clicked the button!")
   }
