Question: Elem.button - onClick?

[JanBizub]

Hello,

how do I assign function to button's onClick in Falco?

I am attempting something like: let button = Elem.button [ Attr.onClick (fun _ -> xxxx) ] [ ]

but it does not exist. I was looking into Falco source code for something like onClick but I have not found anything.

[pimbrouwers]

Hi Jan,

Thanks for reaching out.

As you have discovered, the "onClick" attribute doesn't exist in the Attr module. I omitted the JavaScript attributes because the module is easily extended on a per-project basis, and because it is generally considered a poor security practice to allow for the execution of inline JavaScript with your CSP.

Before I leave some example code, I just want to point out that the F# lamba as you have it will not work. The Markup module produces literal HTML, thus the XmlAttribute type expects a string for both the name and value of the attribute. In the case of onclick, the expecation for the value is a string literal that contains executable JavaScript.

module Attr = 
    let onclick v = Attr.create "onclick" v

Elem.button [ Attr.onclick "(function() { console.log('here') })()" ] [ Text.raw "Click" ]
// Equivalent to: <button onclick="(function() { console.log('here') })()">Click</button>

Let me know if that makes sense, or if you have any other questions.

Cheers

[JanBizub]

Hello Pim, thank you for reply. I was aware that lambda wont work it was just for illustration. It is reasonable. If I wanted javascript onClick then I add an id to the element using Attr.id reference .js file and assign onClick event there. What I was originally after was a button that redirects user, but I used Elem.a masked by bootstrap as button with href. I like Falco very much so far thank you for creating it. :)

[pimbrouwers]

Appreciate that! Glad you enjoy it! Tell your friends!