javascript - 如何在 Kotlin/JavaScript 中制作按钮点击监听器事件?

标签 javascript html intellij-idea kotlin kotlin-js-interop

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

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

谢谢

最佳答案

  1. 在 IntelliJ 中创建一个 Kotlin/JS 项目,命名为“JSProject”
  2. 创建一个包含 ID 为“mybutton”的按钮的 index.html 文件
  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"
    })
}
  1. 在 HTML 文件的末尾导入 Kotlin JS 库和您的代码(从 Kotlin 编译的 JS):
       ...
       <script src="out/production/JSProject/lib/kotlin.js"></script>
       <script src="out/production/JSProject/JSProject.js"></script>
    </body>
    </html>
  1. 将您的 Kotlin 代码编译为 JS(菜单:Build | Rebuild Project)

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

关于javascript - 如何在 Kotlin/JavaScript 中制作按钮点击监听器事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47539943/

相关文章:

html - 绝对定位-webkit-内部元素的过渡

javascript - 使用 JavaScript 显示警告消息

html - 获取 float 图像以对齐左上角

java - 项目在嵌入式 Tomcat 中启动,但不能在完整的 Tomcat 中运行

当我打开 intellij idea 时,Java 崩溃了

javascript - 去掉与 JavaScript 中的模式匹配的值之前和之后的文本

javascript - 将 URL 变量从索引页面传递到经过身份验证的页面而不更改值时出错

javascript - 如何使 EventSource 在 FireFox 的 SharedWorker 中可用?

javascript - 如何计算多个时间范围的交集(最佳见面时间)?

java - 使用 IntelliJ 调试 GWT