Quiero realizar una resta donde los valores provendrán de dos y restarlos, luego mostrar el resultado en otro cuadro de texto. Sin embargo, parece que no puedo llamar a mi función js cuando uso th: onclick.
<div class="mt-3 row g-3"> <div class="col-md-6"> <a th:href="@{~/records/add}"><button type="button" class="btn btn-secondary">Add Record</button></a> <a th:href="@{~/records/graph}"><button type="button" class="btn btn-secondary">Generate Graph</button></a> <a th:onclick="fnCalculate()" ><button type="button" class="btn btn-secondary">Calculate Budget</button></a> </div> <div class=" col-md-6 "> <h6>Total Expenses: </h6> <textarea class="form-control" id="totalExpense" name="totalExpense" th:text="${#aggregates.sum(records.![price])}"></textarea> <h6 class="mt-2">Current Budget: </h6> <textarea type="text" class="form-control mb-2" id="currentBudget" name="currentBudget"></textarea> <h6 class="mt-2">Remaining Budget: </h6> <textarea type="text" class="form-control mb-5" id="remainingBudget" disabled></textarea> </div> </div> </div> </main> <script th:inline="javascript"> function fnCalculate(txt1, txt2) { txt1 = parseInt(document.getElementById("currentBudget").value); txt2 = parseInt(document.getElementById("totalExpense").value); document.getElementById("remainingBudget").innerHtml = txt1 - txt2; } </script>No llame a la función, solo use la referencia de la función
<!-- Excluding the brackets `()` --> <a th:onclick="fnCalculate" ><button type="button" class="btn btn-secondary">Calculate Budget</button></a> </div> Además, onClick enviará su propio parámetro [Event][1] en la función fnCalculate . por lo que no obtendrá txt1 y txt2 como parámetro como esperaba.
Ajuste su implementación de javascript en consecuencia.