Mathematical operations table HTML

Question

Mathematical operations table HTML

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have a table HTML in which I want to perform mathematical operations, but I do not get to execute the code.

function formula() {
var cantidad = document.mytable.cantidad.value;
var precio_unitario = document.mytable.precio_unitario.value;
var iva = document.mytable.iva.value;
 try{
  cantidad = (isNaN(parseInt(cantidad)))? 0 : parseInt(cantidad);
  iva = (isNaN(parseInt(iva)))? 0 : parseInt(iva);
  precio_unitario = (isNaN(parseInt(precio_unitario)))? 0 : parseInt(precio_unitario);
  total = (isNaN(parseInt(total)))? 0 : parseInt(total);

  document.mytable.total.value = (cantidad*iva*precio_unitario);
}
catch(e) {}
}


<table name="mytable" id="mytable" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th width="5%">Cantidad</th>
            <th width="18%">Descripción del artículo</th>
            <th width="5%">Precio Unitario</th>
            <th width="5%">%DTO</th>
            <th width="5%">IVA</th>
            <th width="7%">Precio Total</th>
            <th width="12%">Inspección de recepción</th>
            <th width="12%">Comentarios</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="text" id="cantidad" name="cantidad" class="form-control" onKeyUp="formula()"></td>
            <td><input type="text" id="artiuclo" name="articulo" class="form-control">
          </td>
          <td><input type="text" id="precio_unitario" name="precio_unitario" class="form-control" onKeyUp="formula()"></td>
          <td><input type="text" id="descuento_porcentaje" name="descuento_porcentaje" class="form-control"></td>
          <td><input type="text" id="iva" name="iva" class="form-control">
       </td>
       <td><input type="text" id="precio_total" name="precio_total" class="form-control" onKeyUp="formula()">
     </td>
     <td><input type="text" id="inspeccion" name="inspeccion" class="form-control"></td>
     <td><input type="text" id="comentarios" name="comentarios" class="form-control"></td>
     </tr>
      <th>Total</th>
<td><input type="text" id="total" name="total" class="form-control"></td>
</tbody>
</table>

link

javascript html

asked by Alberto Cepero de Andrés 02.08.2017 в 11:22

source

2 answers

0

In native Javascript you can not access the elements of the DOM as you are trying, with document.mytable.cantidad.value

You have to sign in as follows:

document.getElementById('cantidad').value

You have other methods to access here: link

Also, you have a variable not defined in the function formula (), precio .

answered by 02.08.2017 в 11:45

like hide keyboard when you play outside and inside a textfield when you have a scrollview Error downloading project in Spring from the repository

score 2 · Accepted Answer

I have adapted the code:

       <!DOCTYPE html>
<html>
<body>

<table id="mytable" class="table table-bordered table-hover">
        <thead>
          <tr>
            <th width="5%">Cantidad</th>
            <th width="18%">Descripción del artículo</th>
            <th width="5%">Precio Unitario</th>
            <th width="5%">%DTO</th>
            <th width="5%">IVA</th>
            <th width="7%">Precio Total</th>
            <th width="12%">Inspección de recepción</th>
            <th width="12%">Comentarios</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="number" id="cantidad" name="cantidad" class="form-control" onKeyUp="formula()"></td>
            <td><input type="text" id="artiuclo" name="articulo" class="form-control">
          </td>
          <td><input type="number" id="precio_unitario" name="precio_unitario" class="form-control" onKeyUp="formula()"></td>
          <td><input type="text" id="descuento_porcentaje" name="descuento_porcentaje" class="form-control"></td>
          <td><input type="number" id="iva" name="iva" class="form-control">
       </td>
       <td><input type="number" id="precio_total" name="precio_total" class="form-control" onKeyUp="formula()">
     </td>
     <td><input type="text" id="inspeccion" name="inspeccion" class="form-control"></td>
     <td><input type="text" id="comentarios" name="comentarios" class="form-control"></td>
     </tr>
      <th>Total</th>
<td><input type="number" id="total" name="total" class="form-control"></td>
</tbody>
</table> 

<script>
function formula() {
 var cantidad = document.getElementById('cantidad').value;
 var precio_unitario = document.getElementById('precio_unitario').value;
 var iva = document.getElementById('iva').value;    

      document.getElementById('total').value = (cantidad*iva*precio_unitario);
 }
</script>

</body>
</html>

Try and comment

EDITED : Edited code, changed some inputs type text with < strong> number