Question

我在下面的代码中将数据附加到我的面板，其中显示了所有必要的数据。

我试图提取正在显示的价格并乘以数量（将输入的值）。

问题是，当我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);

}

Answer 1

元素<p id="price">Drug Price : '+drug.price+'</p>不包含value属性，因为它是段落元素。

我已经将大量代码交换到JQuery，因为您已经在使用它，并使用data-属性来处理允许您存储它们的值，而无需从元素中提取内容。

＆＃13;

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);

}

＆＃13;

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

＆＃13;

Answer 2

因为你已经在这里使用jQuery是代码：

使用onkeyup =＆＃34;乘以（drug.price，this.value）＆＃34;

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

请注意，id必须在文档中是唯一的（如果你有多个相同的元素，你可以使用class）并正确声明javaScript变量。

希望有所帮助。

根据数量汇总价格

2 个答案: