Why is the result of the multiplication not seen from the template with javascript but when inspecting the element in chrome dev tools it is?

i’m combining with my django project some javascript to do the calculations of a system.
However, it seems strange to me that something as simple as the result of a multiplication is not reflected in the template of my web page but in the chrome dev tools

I attach some images, in the first the total of the multiplication is not reflected, in the second the result of the multiplication is seen but with the chrome dev tools

Here you do not see the result of the multiplication

Here you see the result of the multiplication

Parte/models.py

class Parte(models.Model):

    codigo=models.IntegerField()
    quantity=models.IntegerField()
    unit_price=models.IntegerField()
    total_price=models.IntegerField()
    tax_free=models.BooleanField()
    descripcion=models.TextField(max_length=255,blank=True, null=True)
    descuento=models.IntegerField(default=0)
    total=models.IntegerField(default=0)
    # estatus = models.BooleanField()


    # def __str__(self):
    #     return f'{self.codigo}: {self.estatus} {self.descripcion}'

    def __str__(self):
        return f'{self.codigo}: {self.descripcion} {self.quantity} {self.unit_price} {self.total_price} {self.tax_free}{self.descuento}{self.total}'

Parte/forms.py

class ParteForm(forms.ModelForm):
   class Meta:
       model=Parte
       fields=['codigo','descripcion','quantity','unit_price','total_price','tax_free']

Presupuestos/models.py

class Presupuestos(models.Model):

    parte=models.ForeignKey(Parte, on_delete=models.SET_NULL, null=True)
    def __str__(self):
        return f'{self.parte}'

calculos.js

function multiplicar(){

    var x=parseInt(document.getElementById('id_quantity').value);
    var y=parseInt(document.getElementById('id_unit_price').value);
    document.getElementById('id_total_price').innerHTML=x*y;

}

<td>
  {{presupuestosparteform.quantity}}
</td>
<td>
  {{presupuestosparteform.unit_price}}
</td>
<td>
  {{presupuestosparteform.total_price}}
</td>
<td>
  <div class="form-check">
    {{presupuestosparteform.tax_free}}
  </div>
</td>
<td>
  <input type="button" class="btn btn-block btn-default" id="addrow" onclick="childrenRow()" value="+" />
</td>
<td>
  <button type="button" onclick="multiplicar();">Button</button>
</td>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The value of a input element can be settled by the value attribute, not by innerHTML:

function multiplicar(){

    var x=parseInt(document.getElementById('id_quantity').value);
    var y=parseInt(document.getElementById('id_unit_price').value);

    document.getElementById('id_total_price').value = x * y;

}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0