기본 쇼핑 카트에 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 닌자가 작성했습니다