title: How do I call my javascript function when using thymeleaf?
body: <p>I want to perform a subtraction where the values will come from two  and subtract them, then display the result to another textbox. However, I can't seem to call my js function when using the th:onclick.</p>
  <pre><code>        &lt;div class=&quot;mt-3 row g-3&quot;&gt;
              &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;a th:href=&quot;@{~/records/add}&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Add Record&lt;/button&gt;&lt;/a&gt;
                  &lt;a th:href=&quot;@{~/records/graph}&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Generate Graph&lt;/button&gt;&lt;/a&gt;
                  &lt;a th:onclick=&quot;fnCalculate()&quot; &gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Calculate Budget&lt;/button&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot; col-md-6 &quot;&gt;
                  &lt;h6&gt;Total Expenses: &lt;/h6&gt;
                  &lt;textarea class=&quot;form-control&quot; id=&quot;totalExpense&quot; name=&quot;totalExpense&quot; th:text=&quot;${#aggregates.sum(records.![price])}&quot;&gt;&lt;/textarea&gt;
  
                  &lt;h6 class=&quot;mt-2&quot;&gt;Current Budget: &lt;/h6&gt;
                  &lt;textarea type=&quot;text&quot; class=&quot;form-control mb-2&quot; id=&quot;currentBudget&quot; name=&quot;currentBudget&quot;&gt;&lt;/textarea&gt;
  
                  &lt;h6 class=&quot;mt-2&quot;&gt;Remaining Budget: &lt;/h6&gt;
                  &lt;textarea type=&quot;text&quot; class=&quot;form-control mb-5&quot; id=&quot;remainingBudget&quot; disabled&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  
  &lt;script th:inline=&quot;javascript&quot;&gt;
      function fnCalculate(txt1, txt2) {
          txt1 = parseInt(document.getElementById(&quot;currentBudget&quot;).value);
          txt2 = parseInt(document.getElementById(&quot;totalExpense&quot;).value);
          document.getElementById(&quot;remainingBudget&quot;).innerHtml = txt1 - txt2;
      }
  &lt;/script&gt;
  </code></pre>