diff --git a/spring-web-modules/spring-thymeleaf/src/main/java/com/baeldung/thymeleaf/controller/FunctionCallController.java b/spring-web-modules/spring-thymeleaf/src/main/java/com/baeldung/thymeleaf/controller/FunctionCallController.java
index b1869aa707..751dbc4e9d 100644
--- a/spring-web-modules/spring-thymeleaf/src/main/java/com/baeldung/thymeleaf/controller/FunctionCallController.java
+++ b/spring-web-modules/spring-thymeleaf/src/main/java/com/baeldung/thymeleaf/controller/FunctionCallController.java
@@ -1,5 +1,6 @@
 package com.baeldung.thymeleaf.controller;
 
+import com.baeldung.thymeleaf.utils.StudentUtils;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -10,7 +11,8 @@ public class FunctionCallController {
 
     @RequestMapping(value = "/function-call", method = RequestMethod.GET)
     public String getExampleHTML(Model model) {
-        model.addAttribute("num", 2);
+        model.addAttribute("totalStudents", StudentUtils.buildStudents().size());
+        model.addAttribute("student", StudentUtils.buildStudents().get(0));
         return "functionCall.html";
     }
 }
diff --git a/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/js/functionCall.js b/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/js/functionCall.js
new file mode 100644
index 0000000000..41a71a73d2
--- /dev/null
+++ b/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/js/functionCall.js
@@ -0,0 +1,8 @@
+
+function greetWorld() {
+    alert("hello world")
+}
+
+function salute(name) {
+    alert("hello: " + name)
+}
\ No newline at end of file
diff --git a/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/views/functionCall.html b/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/views/functionCall.html
index 38555c3d2b..b3172a0c98 100644
--- a/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/views/functionCall.html
+++ b/spring-web-modules/spring-thymeleaf/src/main/webapp/WEB-INF/views/functionCall.html
@@ -4,25 +4,23 @@
 <meta charset="UTF-8" />
 <title>Thymeleaf: Javascript function call</title>
 </head>
+<script type="text/javascript"
+        src="../js/functionCall.js">
+</script>
 <body>
     <header>
         <div> Thymeleaf: Javascript function call </div>
     </header>
-
     <main>
-        <section>
-            <div>Inline function call</div>
-            <div>
-                <header>Without a variable</header>
-                <button th:onclick="'alert(\'a\');'">Without variable</button>
-            </div>
-            <div>
-                <header>With a variable</header>
-                <button th:onclick="'alert(\'' + ${num} + '\');'">With variable</button>
-            </div>
+        <section class="flex-box">
+                <button th:onclick="greetWorld()">using no variable</button>
+                <button th:onclick="'alert(\' 1. static variable used here.\');'">using static variable</button>
+                <button th:onclick="'alert(\' '1. There are exactly  + ${totalStudents} +  students'\');'">using inline dynamic variable</button>
+                <button th:onclick="'javascript:alert(\''2. There are exactly  + ${totalStudents}  +  students'\');'">using javascript:function</button>
+                <button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>
+                <button th:onclick="@{'salute(' + ${student.name} + ');'}">using @ tag</button>
+                <button th:onclick="salute([[${student.name}]])">using double brackets</button>
         </section>
     </main>
-
-
 </body>
 </html>
\ No newline at end of file
