How do I create the onClick function for a button with Kotlinx.html?

Question

I am using Kotlin's html library kotlinx.html for dynamic html building.

I want to create a button which triggers a function when clicked. This is my current code:

class TempStackOverflow(): Template<FlowContent> {
    var counter: Int = 1

    override fun FlowContent.apply() {
        div {
            button(type = ButtonType.button) {
                onClick = "${clicked()}"
            }
        }
    }

    fun clicked() {
        counter++
    }
}

This results in the following source code:

<button type="button" onclick="kotlin.Unit">testkotlin.Unit</button>

Which gives this error when clicked (from Chrome developer console):

Uncaught ReferenceError: kotlin is not defined at HTMLButtonElement.onclick

I have tried several approves, and search for a solution - but could not find the proper documentation.

Alex Humphrey · Accepted Answer · 2021-11-12 08:02:02Z

0

I am not a Kotlin expert, but it's perfectly possible to write event handlers using kotlinx. Rather than:

onClick = "${clicked()}"

have you tried using this?

onClickFunction = { clicked() }

answered Nov 12, 2021 at 8:02

Alex Humphrey

6,2394 gold badges29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointer Null · Accepted Answer · 2023-01-31 12:47:12Z

0

If you really need a bit on Javascript here, you can type this:

   unsafe {
      +"<button onClick = console.log('!')>Test</button>"
   }

Good for debugging and tests, but not very nice for production code.

answered Jan 31, 2023 at 12:47

Pointer Null

40.5k13 gold badges93 silver badges111 bronze badges

Comments

Alexey Sviridov · Accepted Answer · 2021-05-12 15:56:56Z

-1

Unfortunately, you're completely missing the point of the kotlinx.html library. It can only render HTML for you, it's not supposed to be dynamic kotlin->js bridge, like Vaadin or GWT. So, you just set result of clicked function converted to String to onClick button's property, which is effective kotlin.Unit, because kotlin.Unit is default return value of a function if you not specify another type directly.

    fun clicked() {
        counter++
    }

is the same as

    fun clicked():Unit {
        counter++
    }

and same as

    fun clicked():Kotlin.Unit {
        counter++
    }

So, when you set "${clicked()}" to some property it actually exec function (your counter is incremented here) and return Koltin.Unit value, which is becomes "Kotlin.Unit" string when it rendered inside "${}" template

edited May 12, 2021 at 15:56

answered May 12, 2021 at 15:48

Alexey Sviridov

3,49031 silver badges34 bronze badges

2 Comments

Lekkkim Over a year ago

Thanks for the quick answer! I am desperately searching for a platform for my app, so I kind of rushed into using it. Thanks for enlightening me. I will try to move towards Kotlin + JS/React. I am currently working with React at other projects and I should provide what I need.

Alexey Sviridov Over a year ago

Excellent choice, Kotlin for backend, JS/React for frontend is a wise decision

Collectives™ on Stack Overflow

How do I create the onClick function for a button with Kotlinx.html?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related