my template file:
<!DOCTYPE html>
<html>
<head>
<title>New Order</title>
</head>
<body>
{%extends "base.html"%}
{%block content%}
<br>
<form id="sform" class=" mb-3 container" method="post">
<div class="row">
<span id="innout" class="">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Customers</label>
<select class="form-select" name = "client" id="inputGroupSelect01">
<option selected>Choose</option>
{%for customer in customers%}
<option value={{customer.name}}>{{customer.name}}</option>
{%endfor%}
{%for supplier in suppliers%}
<option value={{supplier}}>{{supplier}}</option>
{%endfor%}
</select>
</div>
<br>
<div class="input-group-text my-2 ">
<input class="form-check-input mt-0" id="in" type="radio" value="in" name="IO" required aria-label="Radio button for following text input">
<label for="in">In</label>
</div>
<div class="input-group-text my-2">
<input class="form-check-input mt-0" id="out" type="radio" value="out" name="IO" aria-label="Radio button for following text input">
<label for="out">Out</label>
</div>
</span>
{%for i in index%}
{%if i == 0 or i==11 or i==21 %}
<div id = itemstock class="col">
{%endif%}
<div id="{{items[i].code}}">
<div class="input-group my-1">
<input id="{{items[i].name}}" name="{{items[i].name}}" type="number" class="form-control" aria-label="Dollar amount (with dot and two decimal places)" value="0" min="0" onchange="total()">
<span class="input-group-text">{{items[i].stock}}</span>
<span class="input-group-text">{{items[i].name}}</span>
</div>
</div>
{%if i == 10 or i==20 or i==30 %}
</div>
{%endif%}
{%endfor%}
<span id="ttl">
<input type="date" name="today" class="form-control" value="{{date}}">
</span>
</div>
<div class="row">
<div class="input-group mb-3 my-5 ">
<span class="input-group-text" id="inputGroup-sizing-default">Total</span>
<input id="total" type="number" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="d-grid gap-2 col-6 mx-auto ">
<input type="submit" class="btn btn-primary" value="Submit" onclick="submit()" >
<button id="calc" class="btn btn-primary" >Calculate</button>
</div>
</div>
</form>
<p class = "dump" style="display: none"> {{dump}}</p>
{%endblock content%}
</body>
<script type="text/javascript" src="{{url_for('static', filename='main.js')}}"></script>
<script type="text/javascript">
items = JSON.parse(document.querySelector(".dump").innerHTML)
var total = function(){
let numtotal = 0
for (var i = 0; i < items.length; i++) {
document.querySelector("#"+items[i].name).addEventListener("change",total())
numtotal = numtotal + parseInt(document.querySelector("#"+items[i].name).value,10)*items[i].price
}
document.querySelector("#total").value = numtotal
}
</script>
</html>
my js file:
items = JSON.parse(document.querySelector(".dump").innerHTML)
var total = function(){
let numtotal = 0
for (var i = 0; i < items.length; i++) {
document.querySelector("#"+items[i].name).addEventListener("change",total())
numtotal = numtotal + parseInt(document.querySelector("#"+items[i].name).value,10)*items[i].price
}
document.querySelector("#total").value = numtotal
}
The onchange is not working. although I can call the function in the console, it doesn't work on the screen. even tried copy pasting the code into a script tag. even tried using event listener function. According to the first options, i changed the onchange to an eventlistener but that doesnt seem to work. I'm pretty sure the file is properly linked and the Json is getting converted, because when i call the function in the console it runs properly and gives me the total in the input box.
