Суммирование цен в зависимости от количества

1

Я добавил данные на свою панель в приведенном ниже коде, который отображает все необходимые данные.

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

Проблема в том, что когда я alert цену, как в коде, я получаю NaN, хотя это число.

$(".container").append(
    '<p id="name">Drug: '+  drug.name + '</p> <p id="price">Drug Price  :  '+drug.price+'</p>

    <input type="text"  onKeyUp="multiply()" id="qty"  name="qty" />

    <p id="total">Total Price  $:'+0+'  </p>');  

function multiply()
{
    a = Number(document.getElementById('qty').value);
    b = Number(document.getElementById('price').value);
    c = a * b;

    document.getElementById('total').value = c;

    alert('this' + b);

}
  • 0
    Элемент с price ID не имеет атрибута value , вы просто даете ему содержимое. И я не знаю, откуда исходит quantity идентификатор, так как его нет в вашем примере.
  • 0
    @DBS, я просто дал ему value = 1 атрибута value = 1 но это NaN, и я просто отредактировал количество
Теги:

2 ответа

2
Лучший ответ

Элемент <p id="price">Drug Price: '+drug.price+'</p> не содержит атрибута value поскольку он является элементом абзаца.

Я поменял много кода на JQuery, поскольку вы уже используете его, и использовал data- для обработки значений, которые позволяют хранить их, не data- из содержимого элементов.

var drug = {"name":"test", "price":"100"};

// In the appended content, I've added a "data-price" attribute to the price element 
// and a span to the total to make the final print out simpler
$(".container").append(
  '<p id="name">Drug: ' + drug.name + '</p>'+
  '<p id="price" data-price="'+drug.price+'">Drug Price  :  ' + drug.price + '</p>'+
  '<input type="text"  onKeyUp="multiply()" id="qty"  name="qty" />'+
  '<p id="total">Total Price  $:<span></span></p>');

function multiply() { 
  a = Number($('#qty').val());
  // Here we access the data attribute
  b = Number($('#price').data("price"));
  c = a * b;

  // Printing out the final value into the span we added earlier
  $("#total span").text(c);

  alert("Total = " + c);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
1

Поскольку вы уже используете jQuery, вот код:

Использовать onkeyup = "multiply (drug.price, this.value)"

function multiply(a,b){
   var c = a * b;
   document.getElementById('total').value = c;
}

Обратите внимание, что идентификатор должен быть uniqe внутри документа (вы можете использовать класс, если у вас есть несколько одинаковых элементов) и правильно объявлять переменные javaScript.

Надеюсь, это поможет.

  • 0
    Я пробовал ваше решение, но тогда функция не работает

Ещё вопросы

Сообщество Overcoder
Наверх
Меню