So I have a HTML code where I want to perform some basic subtraction calculation between 'High' and 'Low' columns in HTML. I have looped through the html table to fill it and thus I have tried to use Javascript code in the loop so that it can automatically calculate the difference too. But I am not getting the desired results. When I am printing the results through console.log, I am getting the same high and low for every iteration. I am not sure why since html table is in loop and table is made correctly
<table id='example' class='table'>
<thead>
<tr>
<th>Stock</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Close</th>
<th>Volume</th>
<th>Buyers</th>
<th>Sellers</th>
<th>Ratio</th>
</tr>
</thead>
<tbody id="people">
{% for x,y in info.items %}
<tr>
<td scope="row">{{x|split}}</td>
<td id= 'open'>{{y|access_dictionary:'ohlc'|access_dictionary:'open'}}</td>
<td id='high'>{{y|access_dictionary:'ohlc'|access_dictionary:'high'}}</td>
<td id='low'>{{y|access_dictionary:'ohlc'|access_dictionary:'low'}}</td>
<td>{{y|access_dictionary:'ohlc'|access_dictionary:'close'}}</td>
<td>{{y|access_dictionary:'volume'}}</td>
<td id='buyquantity'>{{y|access_dictionary:'buy_quantity'}}</td>
<td id='sellquantity'>{{y|access_dictionary:'sell_quantity'}}</td>
<td id='ratio'></td>
<script>
console.log(document.getElementById('high').innerHTML)
console.log(document.getElementById('low').innerHTML)
console.log(document.getElementById('open').innerHTML)
d = document.getElementById('high').innerHTML - document.getElementById('low').innerHTML
console.log(d)
document.getElementById('ratio').innerHTML = d;
</script>
</tr>
{% endfor %}
</tbody>
</table>
Sir, You Must have unique id for selecting element in Javascript.
Sir, Try this Code Below I Change code little bit. I do not have tested below code:
<table id='example' class='table'>
<thead>
<tr>
<th>Stock</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Close</th>
<th>Volume</th>
<th>Buyers</th>
<th>Sellers</th>
<th>Ratio</th>
</tr>
</thead>
<tbody id="people">
{% for x,y in info.items %}
<tr>
<td scope="row">{{x|split}}</td>
<td id='open{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'open'}}</td>
<td id='high{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'high'}}</td>
<td id='low{{x}}'>{{y|access_dictionary:'ohlc'|access_dictionary:'low'}}</td>
<td>{{y|access_dictionary:'ohlc'|access_dictionary:'close'}}</td>
<td>{{y|access_dictionary:'volume'}}</td>
<td id='buyquantity'>{{y|access_dictionary:'buy_quantity'}}</td>
<td id='sellquantity'>{{y|access_dictionary:'sell_quantity'}}</td>
<td id='ratio'></td>
<script>
console.log(document.getElementById('high{{x}}').innerHTML);
console.log(document.getElementById('low{{x}}').innerHTML);
console.log(document.getElementById('open{{x}}').innerHTML);
d = Number(document.getElementById('high{{x}}').innerHTML) - Number(document.getElementById('low{{x}}').innerHTML)
console.log(d);
document.getElementById('ratio{{x}}').innerHTML = d;
</script>
</tr>
{% endfor %}
</tbody>
</table>