Как я это делаю, чтобы увеличивать количество с неудара в лунку и было изменено количество в span?

Так как это мой вопрос, я изучаю javascript и в упражнении класса они просят у меня увеличивать количество ячейки и иметь отголосок в span. На мой случай я должен увеличивать число единиц, которое будет должно увеличивать соответствующую цену в ячейке общего количества.

Кусок кода HTML

<table class="table table-condensed" id="myTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Nombre producto</th>
                <th>Cantidad</th>
                        <th>Precio unitario</th>
                <th>Precio</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody id="tbodyusuarios">
            <tr>
              <td>1</td>
              <td>Camiseta</td>
              <td><input type="number" id="cantidadCamiseta" value="3" precio="5" onclick="incrementPriceRow1"></td>
                <td><span>5</span>€</td>
              <td><span id="precioFila1">15</span>€</td>
              <td>
                <button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button>
            </td>

Мой метод в javascript

function incrementPriceRow1(){
    var precioFila1 = document.getElementById("precioFila1").innerHTML;

    var cantidadCamiseta = document.getElementById("cantidadCamiseta").value;

    return cantidadCamiseta*precioFila1;

}
2
задан 17.01.2017, 20:33
0 ответов

Измените твою функцию incrementPriceRow1(), кроме того, что эта функция не была использована, и чтобы решать проблему, ты не нуждаешься в том, чтобы ничего не возвратить.

с функцией value я получаю символы поля

с функцией innerHTML вставленный текст

верит один id="precio" в span цены, чтобы получать текст span и потом с parseInt () обращать это в число

решая твою проблему:

function incrementPriceRow1(){
  
    var precioFila1 = document.getElementById("precioFila1");
    var precio = document.getElementById("precio").innerHTML;
    
    var cantidadCamiseta =document.getElementById("cantidadCamiseta").value;
    var total=parseInt(cantidadCamiseta)*parseInt(precio);
    precioFila1.innerHTML=total;


}
<table class="table table-condensed" id="myTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Nombre producto</th>
                <th>Cantidad</th>
                        <th>Precio unitario</th>
                <th>Precio</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody id="tbodyusuarios">
            <tr>
              <td>1</td>
              <td>Camiseta</td>
              <td><input type="number" id="cantidadCamiseta" value="" precio="5"></td>
                <td><span id="precio">5</span>€</td>
              <td><span id="precioFila1"></span>€</td>
              <td>
                <button class="btn btn-default" type="submit" onclick="incrementPriceRow1()">prueba</button>
            </td>
2
ответ дан 03.12.2019, 17:38
  • 1
    Верно!! функционируй!! большое спасибо! –  17.01.2017, 21:22

Ты мог бы делать следующее:

  • Вместо того, чтобы использовать ids, ты мог бы использовать class чтобы идентифицировать различные данные в линии.

    • class="cantidad" чтобы идентифицировать input
    • class="precio" чтобы идентифицировать span с precio
    • class="total" чтобы идентифицировать span где он сохраняет total.
  • Ты подписываешься на событие input, который взрывается каждый раз, когда меняется стоимость input.cantidad, ты ищешь внутри линии precio и ты устанавливаешь total, умножая cantidad * precio.

Так например:

$('#tbodyusuarios')
  .on('input', '.cantidad', function() {
    var $input = $(this), // input.cantidad
        cantidad = parseInt($input.val(), 10), // valor de input.cantidad
        $tr = $input.closest('tr'), // fila del input.canitdad
        precio = parseInt($tr.find('.precio').text(), 10), // valor del span.precio
        $total = $tr.find('.total'); // elemento span.total
    
    $total.text(precio * cantidad); // seteamo el valor del span.total
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-condensed" id="myTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre producto</th>
      <th>Cantidad</th>
      <th>Precio unitario</th>
      <th>Precio</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody id="tbodyusuarios">
    <tr>
      <td>1</td>
      <td>Camiseta</td>
      <td><input type="number" class="cantidad" value="3"/></td>
      <td><span class="precio">5</span>€</td>
      <td><span class="total">15</span>€</td>
      <td><button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button></td>
     </tr>
    <tr>
      <td>1</td>
      <td>Pantalon</td>
      <td><input type="number" class="cantidad" value="1"/></td>
      <td><span class="precio">8</span>€</td>
      <td><span class="total">8</span>€</td>
      <td><button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button></td>
     </tr>
   </tbody>
</table>
3
ответ дан 03.12.2019, 17:38

Код, который ты имеешь, представляет несколько проблем:

  • В призыв к функции incrementPriceRow1 ему не хватает скобок, это должный быть быть так: incrementPriceRow1().
  • Ты умножаешь неправильную стоимость: ты не хочешь умножить количество и PrecioFila1, что ты хочешь умножить, является количеством из-за количества / цены за единицу товара. Для этого:
    • добавь идентификацию в span что содержит цену за единицу товара
    • Используй нового пойдите вместо PrecioFila1
  • Не надо, чтобы функция ничего не возвратила, что он должен делать, состоит в том, чтобы менять стоимость PrecioFila1, что возможно делать распределяя ему стоимость в innerHTML.

Скроллируя это, у тебя остается нечто похожее, что уже функционирует без проблем:

function incrementPriceRow1(){
  
    var precioUnitario = document.getElementById("precioUnitario").innerHTML;
    var cantidadCamiseta = document.getElementById("cantidadCamiseta").value;

    document.getElementById("precioFila1").innerHTML = cantidadCamiseta * precioUnitario;

}
<table class="table table-condensed" id="myTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre producto</th>
      <th>Cantidad</th>
      <th>Precio unitario</th>
      <th>Precio</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody id="tbodyusuarios">
    <tr>
      <td>1</td>
      <td>Camiseta</td>
      <td><input type="number" id="cantidadCamiseta" value="3" precio="5" onclick="incrementPriceRow1()"></td>
      <td><span id="precioUnitario">5</span>€</td>
      <td><span id="precioFila1">15</span>€</td>
      <td>
        <button class="btn btn-default" type="submit" onclick="deleteRow(this)">Eliminar</button>
      </td>
    </tr>
  </tbody>
</table>
2
ответ дан 03.12.2019, 17:38

Теги

Похожие вопросы