Question

在课堂上，我们的任务是通过将对象放入数组来创建水果及其价格的杂货清单。现在我做了那个部分，我应该从上一个实验室扩展购物车程序。设置基本HTML页面将商品及其价格从购物清单附加到页面。“ 这是我迷路的地方。我们只能使用vanilla JavaScript。 **我能够让网页显示总按钮，它有效（它计算了项目），但我的杂货清单和价格在哪里？！

我的代码：

var fruita = {
name: 'apple',
price: 5
};

var fruitb = {
name: 'pear',
price:3
};

var fruitc = {
name: 'orange',
price: 4
};

var grocery = [];
grocery.push(fruita, fruitb, fruitc);


var total = (fruita.price + fruitb.price +fruitc.price);

for (i=0; i<grocery.length; i++){
console.log(grocery[i].name);
console.log(grocery[i].price);
}

var total = (fruita.price + fruitb.price +fruitc.price);
console.log("total price= " + total);

function calcTotal() {
document.getElementById("total").innerHTML = total;
}

function displayList() {
document.write(grocery).innerHTML = grocery;

在我的HTML中：

<head>
<script src="monday2assn2.js"></script>
</head>
<body>

<h1> Shopping List </h1>

<p>Click "Total" to add up your shopping list.</p>


<button onclick="calcTotal()">Total</button>

<p id="total"> </p>

Answer 1

一个好的开始方法是创建一个全局函数，标准化您向页面添加元素的方法。以下是可用于将元素添加到父元素的函数：

function addElement(type,content,parent) {
    var newElement = document.createElement(type);
    var newContent = document.createTextNode(content);
    newElement.appendChild(newContent);
    get(parent,'id');
    current.insertBefore(newElement,current.childNodes[0]);
}
function get(reference, type) {
    switch(type) {
        case 'id':
        current = document.getElementById(reference);
        break;
        case 'class':
        current = document.getElementsByClassName(reference);
        break;
        case 'tag':
        current = document.getElementsByTagName(reference);
        break;
    }
}

我从我自己的文件中复制并粘贴了这个，因为我经常使用它们。 get 函数用于选择元素。 addElement 函数用于创建新元素。 “type”参数指定标签 - 所以p，div，span等等。“Content”和“parent”非常简单。 “parent”参数由父级的id表示。完成后，您可以这样做：

for(var i=0;i<grocery.length;i++) {
    var concat = 'Item: ' + grocery[i].name + ' Price: ' + grocery[i].price;
    addElement('p',concat,'body'); //assign the body tag an id of "body"
}

另一种方法是简单地设置body的innerHTML以向其添加所有内容。

get('body','id');
var joined = current.innerHTML; //all elements in a string
for(var i=0;i<grocery.length;i++) {
    var concat = 'Item: ' + grocery[i].name + ' Price: ' + grocery[i].price;
    joined += concat;
}
current.innerHTML = joined;

当然，如果您更具体地指定希望在HTML中格式化数据的方式，将会有所帮助。但是不要害怕Vanilla Javascript - 我发现它比使用类似于这样的东西容易得多，人们常常过于依赖库而忘记了JS的根源。

将JavaScript列表添加到网页

1 个答案: