How to set 'max' value in <input> tag in HTML?

Question

Can I set 'max' value in

            <input type="number" step="10" min="10"
                   th:max=""
                   th:field="*{coins}" required>

with variable created in ?

        <script>
            var wallet = [[${session.student.wallet}]];
            var price = [[${item.itemCost}]];
            var lowerValue = Math.min(wallet, price);
        </script>

The problem is to assign to 'max' the smaller of the values visible in .

Answer 1

If you give your input an id attribute like (<input id="my-input"...), then it should be as simple as:
document.getElementById("my-input").setAttribute("max", myCalculatedValue) ;

 let wallet = 50.00, price = 42.00; const myCalculatedValue = Math.min(wallet, price); const myInput = document.getElementById("my-input"); myInput.setAttribute("max", myCalculatedValue);

 <input id="my-input" type="number" step="10" min="10" />

Answer 2

 //default the max to 99 document.getElementById("yourinput").max = 99; // setMax gets triggered by the button's `onclick` attribute function setMax() { let max = document.getElementById("yourmax").value; document.getElementById("yourinput").max = max; }

 <!-- Note that I gave your elements IDs so JS can reference them --> Default <b>max=99</b> got set when page loaded. Try it below.<br/> Set max here: <input id="yourmax" value="10"><br/> Click this button to apply your NEW max: <button onclick="setMax()">Set Max</button></br> Max gets set on this input: <input id="yourinput" type="number" min="0" style="width:50px;">

Answer 3

You can do this with just Thymeleaf.

<input type="number"
       step="10" min="10"
       th:max="${T(Math).max(session.student.wallet, item.itemCost)}"
       th:field="*{coins}"
       required>