无法使用附加

时间:2018-02-14 14:20:44

标签: javascript

我正在制作送餐应用程序。我希望有一个地方可以显示总数。现在,我无法显示数量和价格乘以的总金额。它没有显示在应用程序上。

而且,控制台上也没有错误。

Javascript代码:

function _showorderResult(arr) {
    var value1 = arr[0].price;
    var value2 = arr[0].quantity;

    for (var i = 0; i < arr.length; i++) {

        result = value1 * value2;

        htmlstring = "";

        $("#itemimage").html("<img src='" + serverURL() + "/images/" +
            arr[i].imagefile + "' width='200'>");
        $("#price").html("Price" + ": " + " $" + arr[i].price);
        $("#itemname").html("Item" + ":" + arr[i].itemName);
        $("#quantity").html("Quanitiy" + ":" + arr[i].quantity);
        $("result").append(htmlstring);
        $("#requestedDateTime").html("To delivery by" + ":" + arr[i].requestedDateTime);
        $("#deliveredDateTime").html("Delivered on" + ":" + arr[i].deliveredDateTime)

    }
}

1 个答案:

答案 0 :(得分:1)

  

而且,控制台上也没有错误。

我的控制台中有很多错误,但这里有几个错误。首先是你的代码不可运行。请考虑制作minimal, verifiable example

接下来,您正在滥用或未正确格式化append(...)功能。这意味着要附加HTML元素,而不是字符串值。

正如评论所示,您似乎混淆了var result$("result")。如果您没有使用DOM选择器,您可能不希望jQuery包装您的变量。正确的jQuery-wrap语法应该是$(result)而没有双引号,但请不要这样做,它不仅仅提供var result的任何好处。 htmlstring并未包含任何实际的HTML,因此我将其重命名为runningTotal,并将其添加到price * quantity。必须先将其初始化,否则您将获得NaN

确保初始化变量。到目前为止,还有一些硬编码索引,例如value1 = arr[0].price,在这个粘贴的代码中没有任何意义。我们可以假设您在排除故障后将其留在这里。请在下次清理它们。

最后,这是次要的,但要与您的对象名称保持一致......例如imagefileimageFile。只要你保持一致,你选择哪个并不重要。这将有助于在路上发现拼写错误。

这是一个有效的例子:

<html>
<img src="" id="itemimage">
<p id="price">Price: $0.00</p>
<p id="itemname">Item: None</p>
<p id="quantity">Quantity: None</p>
<p id="result">Running: None</p>
<p id="requestedDateTime">To delivery by: None</p>
<p id="deliveredDateTime">Delivered on: None</p>

<script>
var order = [{
  price: 5,
  quantity: 3,
  itemName: 'Pizza',
  imagefile: 'pizza.png',
  requestedDateTime: '12:00',
  deliveredDateTime: '12:30'
}];

/** Dummy function to allow code to run **/
var serverURL = function() { return ""; }

function _showorderResult(arr) {
    // var value1 = arr[0].price;
    // var value2 = arr[0].quantity;
    var result;
    var runningTotal = 0;

    for (var i = 0; i < arr.length; i++) {

        result = arr[i].price * arr[i].quantity;

        runningTotal += result;

        $("#itemimage").html("<img src='" + serverURL() + "/images/" + arr[i].imagefile + "' width='200'>");
        $("#price").html("Price" + ": " + " $" + arr[i].price);
        $("#itemname").html("Item" + ":" + arr[i].itemName);
        $("#quantity").html("Quanitiy" + ":" + arr[i].quantity);
        $("#result").html("Running" + ":" + runningTotal);
        $("#requestedDateTime").html("To delivery by" + ":" + arr[i].requestedDateTime);
        $("#deliveredDateTime").html("Delivered on" + ":" + arr[i].deliveredDateTime);

    }
}

_showorderResult(order);
</script>
</html>
相关问题