Lets say for example I have a variable b and c in:

<script th:inline="javascript">
let c = 20;
let b = 30;
document.getElementById("b").innerHTML = b;
        document.getElementById("c").innerHTML = c;
</script>

When I try to print them out on my page with :

 <h1>"The value for b is: " <span id="b"></span></h1>
<h1>"The value for c is: " <span id="c"></span></h1>

This works and the values of these varaibles are shown on the page. Now that I'm using Thymeleaf and SPring I have a Controller methode like this:

     @GetMapping("/test")
        public String test( double val,  double val2,
                                     @RequestParam double rand, Model model) {
            model.addAttribute("val", val);
            model.addAttribute("val2", val2);
            model.addAttribute("rand", rand);
            model.addAttribute("distance", distance);
     
System.out.println(val);
        System.out.println(val2);
            return "/Test";
        }

I want to input only the rand, val and val2 should have the values from the JavaScript variables(b and c):

<form th:action="@{/test}"  method="get"><br>

    <input type="text" id="b" th:name="val" " th:value="${b}">
    <input type="text" id="c" th:name="val2" " th:value="${c}">



    <label for="rand">rand:</label>
    <input type="number" id="rand" th:name="rand" placeholder="rand" th:default="0"><br>




    <input type="submit" value="Submit" onclick="add()">
    <input type="reset" value="Reset">

</form>

But I am not getting the correct values from the JavaScript code.So I want to assign the variables b and c to the variables val and val2 so that I only need to input the request parameter rand. Has anyone a solution for this.I looked it up and all the cases were that they wanted to assign the Thymeleaf variable in the script and not the other way around. Thanks in advance