如何使用Javascript获取排序列表的总数

Question

我正在编写一个在线交付网页的代码，我很难弄清楚如何输出用户订购的列表的总数。

function ListOrder(){
        document.getElementById('order').innerHTML += "<div id=\"YourOrders\">" +  + document.getElementById('FoodName').value + document.getElementById('quantity').value  + document.getElementById('Totality').value + "</div><br>";}

编辑:我想知道如何得到总价的总和。因此，我在document.getElementById('Totality').value之间放置了一个parseInt。现在看起来是这样的，

function ListOrder(){
        document.getElementById('order').innerHTML += "<div id=\"YourOrders\">" +  + document.getElementById('FoodName').value + document.getElementById('quantity').value  + parseInt(document.getElementById('Totality').value) + "</div><br>";}

有没有人能帮我做个函数或者别的什么？请只给我Javascript。我还是个新手。

Answer 1

function ListOrder(){
  document.getElementById('order').innerHTML +=
    "<div id=\"YourOrders\">" +
    parseInt(document.getElementById('FoodName').value) +
    parseInt(document.getElementById('quantity').value) +
    parseInt(document.getElementById('Totality').value) +
    "</div><br>";
}

Answer 2

代码的内核应该如下所示(删除双+运算符，重新格式化)：

function ListOrder(){
    document.getElementById('order').innerHTML +=
          "<div id=\"YourOrders\">" +  (
                document.getElementById('FoodName').value
              + document.getElementById('quantity').value
              + document.getElementById('Totality').value
          )
        + "</div><br>"
    ;
}

您提出的问题表明您希望输出一个有序列表，该列表由具有特定in的所有(html)元素的内容组装而成。

这将不会可靠地工作：

• Ids应该是文档唯一的。
• 您使用的Js函数不会遍历列表。

相反，按照以下代码行进行操作(假设您导入了jquery，这是一个跨浏览器的dom处理和ajax库(无论如何都应该使用它))：

function ListOrder(){
    var e_orders = $("<div id=\"YourOrders\">");
    $("#order").append(e_orders);

    $(".FoodName").each ( function ( idx_fn, e_fn ) {
        $(e_orders).append(
            $("<div/>").append(
                 $(e_fn).val()
               + $(e_fn).nextAll('.quantity').val()
               + $(e_fn).nextAll('.Totality').val()
            );
        );
        $(e_orders).append("<br>");
    });

    return e_orders;
}

代码模板假设源数据是带有css类quantity，Totality和'FoodName标记的value属性的元素，这些元素是兄弟元素，在容器元素中是唯一的，包括数量信息。它应该足够灵活，以适应您的实际需要和html结构。