array.push（）を使用した基本的なショッピングカート。

Question

私はあなたが項目をクリックすることができる基本的なショッピングカートのアプリを作りたいと思います。クリックするたびに項目が配列に追加されます。最後に、合計ボタンを押して、追加したすべての項目を見ることができるはずですが、それまでは機能していません。これまで

コード：

function add() { 

var shoppingCart = []; 

document.getElementById("itemOne").addEventListener("click", function() { 
shoppingCart.push("One"); 
    }); 

document.getElementById("itemTwo").addEventListener("click", function() { 
    shoppingCart.push("Two") 
    }); 

document.getElementById("total").addEvenetListener("click", function() { 

document.getElementById("display").innerHTML = 
    shoppingCart; 
}) 
} 

Jsfiddle：https://jsfiddle.net/xpb8oarx/

Answer 1

• タイプミスと呼ばれることはありません
• addEventListener @はadd()あなたは必要としないこととにかく

var shoppingCart = []; 
 
document.getElementById("itemOne").addEventListener("click", function() { 
 
    shoppingCart.push("One"); 
 
}); 
 

 
document.getElementById("itemTwo").addEventListener("click", function() { 
 
    shoppingCart.push("Two"); 
 
}); 
 

 
document.getElementById("total").addEventListener("click", function() { 
 
    document.getElementById("display").innerHTML = shoppingCart; 
 
});

.container { 
 
    width: 70%; 
 
    background-color: black; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
} 
 
#itemOne, 
 
#itemTwo { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid white; 
 
    margin: 1%; 
 
    color: white; 
 
} 
 
#display { 
 
    color: white; 
 
    text-align: center; 
 
}

<div class="container"> 
 

 
    <div id="itemOne" class="itemOne"> 
 
    <button class=" item">Chicken</button> 
 
    </div> 
 

 
    <div id="itemTwo"> 
 
    <button class="item">Veggies</button> 
 
    </div> 
 

 
    <button id="total">Total</button> 
 
    <h1 id="display"></h1> 
 
</div>

Answer 2

あなたは純粋なHTML5とバニラでカートを実装する方法を説明チュートリアルHEREを見つけることができます。 Tutoフランス語のJS忍者によって書かれた