Grundlegende Einkaufswagen mit array.push();

Question

Ich möchte eine grundlegende Warenkorb App machen, in der Sie auf Elemente klicken können, sollte jeder Klick das Element zu einem Array hinzufügen. Am Ende sollten Sie in der Lage sein, einen Totalknopf zu drücken und alle Artikel zu sehen, die Sie hinzugefügt haben, aber bis jetzt funktioniert es nicht.

-Code bisher:

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

• Typo @addEventListener
• genannt Nie add() brauchen Sie nicht, dass sowieso

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

Sie werden ein Tutorial HERE, die finden erklären, wie eine Karre in reiner HTML5 und Vanille zu implementieren. Tuto geschrieben von einem französischen JS ninja