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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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;

}