如何在 Kotlin/JavaScript 中制作按钮单击侦听器事件？

Question

在 IntellJ IDEA 中，我在 HTML 文件中创建了一个带有 id 的按钮。 我想要实现的是使用 kotlin 将标题标签更改为“单击按钮”。

在搜索 kolinlang.org 网站和其他资源时，我很难找到做特定事情的简单参考，我想知道是否有一个翻译的 kotlin/javascript 站点，其中所有这些站点都像这个站点一样放在一起，例如： https://www.w3schools .com/js/default.asp

谢谢

Answer 1

1. 在 IntelliJ 中创建一个 Kotlin/JS 项目，命名为“JSProject”
2. 创建一个index.html文件，其中包含一个 ID 为“mybutton”的按钮
3. 使用以下内容创建 Kotlin 文件main.kt ：

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. 在 HTML 文件的末尾导入 Kotlin JS 库和您的代码（从 Kotlin 编译的 JS）：

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

5. 将您的 Kotlin 代码编译为 JS（菜单：Build | Rebuild Project）

6. 在 Web 浏览器中打开index.html文件并单击按钮。 “按钮被点击”出现在标题中。