0
私はこれに固執し、すべての助けに感謝します。私は値を配列に追加しようとしています。今私は、私の入力に数量があるかどうかを確認しようとしていますが、そうでない場合は、項目価格の時間数量を追加します。入力に量がないものを含め、すべての価格を追加しています。DOMから配列に値を追加する
document.addEventListener('DOMContentLoaded', init);
var cartArray = [];
var ItemNode, quantityNode, costNode, submitButton, subtotalNode, totalNode, output;
function init(){
\t itemNode = document.querySelector('.input-item');
\t costNode = document.querySelectorAll('.posterPrice');
\t quantityNode = document.querySelectorAll('.qtyValue');
\t submitButton = document.querySelectorAll("button");
\t subtotalNode = document.getElementById('subtotal');
\t totalNode = document.querySelector('#total');
\t output = document.querySelector('.output');
\t \t
\t for (var i = 0; i < submitButton.length; i++){
\t \t submitButton[i].addEventListener('click', function(event){
\t \t addPrice();
\t });
\t }
}
function addPrice(){
\t addToCart();
}
function addToCart(){
\t for (var k = 0; k < quantityNode.length; k++){
\t \t for (var j = 0; j < costNode.length; j++){
\t \t if(quantityNode[k].value !== false){
\t \t \t cartArray.push(costNode[j].innerText * quantityNode[k].value);
\t \t }
\t } \t
\t console.log(cartArray); \t
}
}/** {
\t outline: 2px solid red;
}
*/
#poster1 {
\t background-image: url(img/poster7.png);
\t background-size: 100% 100%;
\t width: 200px;
\t height: 300px;
\t background-color: blue;
\t display: inline-block;
}
#poster2 {
\t background-image: url(img/poster2.jpg);
\t background-size: 100% 100%;
\t width: 300px;
\t height: 200px;
\t background-color: blue;
\t display: inline-block;
}
.posterInfo {
\t position: relative;
\t margin-top: 300px;
}
.posterInfo input {
\t width: 45px;
}
/*.wrapper input {
\t width: 45px;
\t display: block;
}*/
.total {
\t position: absolute;
\t bottom: 0;
\t right: 0;
\t margin: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Gallery</title>
\t <link rel="stylesheet" href="style.css">
\t <script src="main.js"></script>
</head>
<body>
\t <h1 id='test'>Posters</h1>
\t <div class="posters">
\t \t <div id="poster1">
\t \t \t <div class="posterInfo">
\t \t \t \t <p>Price: $<span class="posterPrice">2.50</span></p>
\t \t \t \t <label for="qty" class="input-quantity">QTY:</label>
\t \t \t \t <input type="number" name="qty" class="qtyValue">
\t \t \t \t <button class="input-submit">Add to Cart</button>
\t \t \t </div>
\t \t </div>
\t \t <div id="poster2">
\t \t \t <div class="posterInfo">
\t \t \t \t <p>Price: $<span class="posterPrice">3.50</span></p>
\t \t \t \t <label for="qty" class="input-quantity">QTY:</label>
\t \t \t \t <input type="number" name="qty" class="qtyValue">
\t \t \t \t <button class="input-submit">Add to Cart</button>
\t \t \t </div>
\t \t </div>
\t \t </div>
\t \t <div id="poster3"></div>
\t \t <div id="poster4"></div>
\t \t <div id="poster5"></div>
\t </div>
\t <div class="total output">
\t \t <p>Subtotal: $<span id="subtotal"></span></p>
\t \t <p>Taxes: <span>$10.00</span></p>
\t \t <p>Shipping: <span>$10.00</span></p>
\t \t <p>Total: $<span id="total"></span></p> \t
\t </div>
\t <!--<script src="main.js"></script>-->
</body>
</html>