How to make button click listener event in Kotlin/JavaScript?

Question

Inside IntellJ IDEA, I ve created a button in my HTML file with an id. What I'm trying to achieve is to change the header tag to "button clicked" using kotlin.

Upon searching the kolinlang.org website and others resources I have trouble finding simple reference for doing specific things I wonder if there a translated kotlin/javascript site where all of them is put together like this site for example: https://www.w3schools.com/js/default.asp

Thanks

Answer 1

1. Create a Kotlin/JS project in IntelliJ, named "JSProject"
2. Create an index.html file including a button with ID "mybutton"
3. Create a Kotlin file main.kt with the following content:

import org.w3c.dom.HTMLButtonElement
import kotlin.browser.document

fun main(args: Array<String>) {
    val button = document.getElementById("mybutton") as HTMLButtonElement
    button.addEventListener("click", {
        document.title = "button was clicked"
    })
}

4. Import the Kotlin JS library and your code (JS compiled from Kotlin) in at the end of your HTML file:

       ...
       <script src="out/production/JSProject/lib/kotlin.js"></script>
       <script src="out/production/JSProject/JSProject.js"></script>
    </body>
    </html>

5. Compile your Kotlin code to JS (menu: Build | Rebuild Project)

6. Open the index.html file in a web browser and click on the button. "button was clicked" appears in the title.