HTMX Serverless example #1

Button click increase

by Ernest Marcinko

HTML

<!-- htmx  -->
<script src="https://unpkg.com/htmx.org"></script>
<!-- serverless extension -->
<script src="https://unpkg.com/htmx-serverless"></script>

<button hx-get="/count" 
        hx-target="next .counter" 
        hx-trigger="load, click" 
        hx-vals='js:{myVal: i++}' 
        hx-ext="serverless">Click to Increment</button>
<span class="counter"></span>

JavaScript

let i = 0;
htmxServerless.handlers.set('/count', function(text, params, xhr){
    let status = params?.myVal < 10 ? "smaller or equals to" : "bigger than";
    return `Value of "myVal" is: ${params?.myVal}, it is ${status} 10.`;
});