Hi, how would it be so that I can get the result by creating a new element and putting its price, with this I can only access the first one that all the input I created with the blue button using querySelector, but it does not go if I use querySelectorAll , I do not know how to make your correct price and quantity return the new result with a keyup
var quantityInput = document.querySelector('#quantity');
var buttonCalculate = document.getElementsByClassName('calculate')[0];
// var quantityInput = document.getElementById('quantity');
var quantityInput = document.querySelector('#quantity');
var quantity = document.getElementById('quantity').value;
var amount = Number(document.getElementsByTagName('span')[1].innerText.replace('$', ''));
var total = document.getElementsByTagName('span')[3];
//elements
var newItem = document.getElementById('new-item-create');
var row = document.querySelector('div.flex');
var dataset = Number(document.querySelector('div.flex').dataset.count);
var container = document.getElementsByClassName('container')[0];
// var data_count = container.getElementsByClassName('flex').length;
quantityInput.onkeyup = function(e){
total.innerText = e.target.value * amount;
};
//Create element
newItem.onclick = function(e, itemName, itemUnitPrice){
//row flex
var newRow = document.createElement('div');
newRow.classList.add('flex'); newRow.setAttribute('data-count', dataset+=1); newRow.style.margin = '5px';
//div name
var newDivName = document.createElement('div'), newLabelName = document.createElement('input');
newLabelName.setAttribute('placeholder', 'Name...');
newDivName.appendChild(newLabelName); newRow.appendChild(newDivName);
////div price
var newDivPrice= document.createElement('div'), newLabelPrice = document.createElement('input');
newDivPrice.appendChild(newLabelPrice); newRow.appendChild(newDivPrice);
newLabelPrice.style.width = '50px';
//div quantity
var newDivQuantity = document.createElement('div'), newLabel = document.createElement('label'), newInput = document.createElement('input') ;
newDivQuantity.classList.add('quantity'); newLabel.innerText = 'QTY'; newInput.setAttribute('id', 'quantity');
newLabel.appendChild(newInput); newDivQuantity.appendChild(newLabel); newRow.appendChild(newDivQuantity);
//span total
var newSpanTotal = document.createElement('span'), newSpanHolder = document.createElement('span');
newSpanTotal.classList.add('total');
newSpanTotal.appendChild(newSpanHolder); newRow.appendChild(newSpanTotal);
//delete button
var newDivButton = document.createElement('div'), newButton = document.createElement('button');
newButton.classList.add('btn-delete', 'btn'); newButton.textContent = 'Delete';
newDivButton.appendChild(newButton); newRow.appendChild(newDivButton);
container.appendChild(newRow);
};
window.onload = function(){
document.getElementById('quantity').value = '';
};input {
border: solid 1px black;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
margin: 20px auto;
display: block;
text-align: center;
width: 200px;
}
#new-item-create{
color: #fff;
background-color: blue;
border-color: #4cae4c;
margin: 20px auto;
display: block;
text-align: center;
width: 200px;
}
.btn{
border-radius: 3px;
}
.btn-delete {
color: #fff;
background-color: #CF000F;
border-color: #CF000F;
}
.quantity {
margin: 0 5px;
}
.wrapper{
margin: 0 auto;
display: block;
text-align: center;
}
.flex{
display: flex;
justify-content: space-around;
}
.flex2{
display: flex;
/* justify-content: space-around; */
flex-flow: row-reverse wrap;
}
input{
width: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<title>Ironhack cart</title>
</head>
<body>
<div class="wrapper">
<h1>Ironhack merchandising shop</h1>
</div>
<div class="container">
<div class="flex" data-count="0" style="margin:5px;">
<div><span>Iron bubble head</span></div>
<div><span>$25</span></div>
<div class="quantity"><label for="">QTY <input id="quantity" type="text" value="0"></label></div>
<span class="total" style="width:70px; height: 30px;"><span></span></span>
<div><button class="btn btn-delete">Delete</button></div>
</div>
</div>
<div class="flex2">
<div id="new-item-create" class="btn">Create product</div>
<div class="btn btn-success calculate">Calculate price</div>
</div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>