Event و کلیک

کاربر کلیک نکنه که سایت زنده نیست؛ پوستر چاپیه.

درس 4 از 10

کلیک روی دکمه

برای تعامل، باید listener بگذاری. addEventListener بهت اجازه می‌دهد وقتی کاربر کلیک کرد، یک قطعه کد اجرا شود.

click listener

import kotlinx.browser.document

fun main() {
    val button = document.getElementById("btn")
    val output = document.getElementById("output")

    button?.addEventListener("click", {
        output?.textContent = "کلیک خورد؛ زنده‌ایم!"
    })
}

خروجی یا نتیجه اجرا

با کلیک روی دکمه، متن output تغییر می‌کند.

نکته کاربردی: eventها پایه هر رابط کاربری هستند. از منو و فرم گرفته تا سبد خرید، همه با event نفس می‌کشند.

نتیجه این درس 🎯

حالا صفحه به کلیک واکنش نشان می‌دهد. درس بعد state را وارد بازی می‌کنیم.

تمرین! 🧠

برای دکمه‌ای با id برابر save یک listener بنویس که متن status را «ذخیره شد» کند.

جواب تمرین

val save = document.getElementById("save")
val status = document.getElementById("status")
save?.addEventListener("click", {
    status?.textContent = "ذخیره شد"
})

خروجی جواب

بعد از کلیک روی save، متن status برابر «ذخیره شد» می‌شود.