I have an HTML form. In my template the user inputs the value of the monthly costs which is added and appears in the Total Monthly Expense
using the id Total3
.
I have included another input with the number of months for the user to include. I am trying to multiply the Total Monthly Expense
with the number of months typed in by the user without a submit button or refresh to be added in overhead_total
.
I have tried to get the innerelement but it got me an error because initially there is no total yet calculated.
My backend is Django.
Here is the HTML template:
<h5>2. Working capital calculation</h5>
<table class="table table-hover text-nowrap table-borderless">
<thead>
<tr>
<th scope="col">Monthly Cost</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
placeholder="Type in the Monthly Cost"
autocomplete="off"
type="text"
class="form-control"
name="item_11"
id="item_11"
{% if form.is_bound %}value="{{ form.item_11.value }}"{% endif %}/>
{% for err in form.item_11.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25 subtotal-group subtotal-group-3"
name="item_11_amount"
id="item_11_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_11_amount.value }}"{% endif %}/>
{% for err in form.item_11_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<thead class="table-light">
<tr>
<th scope="col">Total Monthly Expense</th>
<th scope="col" id="Total3"></th>
</tr>
</thead>
<tr>
<td>
<h6>How many months do you think you’ll need to cover your overhead?</h6>
</td>
<td>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="no_months"
id="no_months"
style="float:left"
{% if form.is_bound %}value="{{ form.no_months.value }}"{% endif %}/>
{% for err in form.no_months.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<thead class="table-light">
<tr>
<th scope="col">Total Overhead required over indicated period</th>
<th scope="col" id="overhead_total"></th>
</tr>
</thead>
Here is the scripts
<script>
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
console. log(results)
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){
results[ this.name ]=Number( this.value );
const resultGroupSet3 = [...qa('.subtotal-group-3')]
.map(s => Number(s.value))
.reduce((a,v) => a v);
q('th#Total3').textContent = resultGroupSet3;
console.log('results', results);
}));
</script>
CodePudding user response:
We meet again, A_K!
Since resultGroupSet3
is a number, you can immediately grab the value from the no_months
input, multiply it by that result set and then set the appropriate element from there:
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
console. log(results)
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){
results[ this.name ]=Number( this.value );
const resultGroupSet3 = [...qa('.subtotal-group-3')]
.map(s => Number(s.value))
.reduce((a,v) => a v);
q('th#Total3').textContent = resultGroupSet3;
//Push out the result of multiplying the number of months with the result subtotal
q('th#overhead_total').textContent = Number(q('#no_months').value) * resultGroupSet3;
console.log('results', results);
}));
If you get some weird funkiness with the multiplication, wrap the multiplication line in a set of parenthesis and call .toFixed()
on it to control how many decimals are shown:
q('th#overhead_total').textContent = (Number(q('#no_months').value) * resultGroupSet3).toFixed(2);