Quero adiciona um resultado do meu Prompt em uma array .Essa array passa por um For loop que divide ela em duas (name e preço), adiciona o nome dela e do preço em uma lista il, e soma o preço de todos os produtos em baixo.
Deu certo tudo isso, porém não consigo fazer um push para adiciona novos produtos na array clicando no button, como resolver?
const lista = document.querySelector(".block ul ");
const priceTotal = document.querySelector(".block p");
let total = 0;
lista.innerHTML = "";
priceTotal.textContent = "";
const btn = document.querySelector(".btn")
let products = [
"Chápeu:9.50",
"Camiseta:15.40",
"Calça:50.20",
"Óculos:20.80",
"Sapatos:100.10"
]
for(const product of products){
const item = product.split(":")
const name = item[0]
const price = Number(item[1])
total += price
const itemText =`${name} - $$${price}`
const listitem = document.createElement("li")
listitem.textContent = itemText
lista.appendChild(listitem)
}
priceTotal.textContent = `Total: ${total.toFixed(2)}`
btn.addEventListener("click",( ) =>{
const ask = prompt ("deseja adiciona um produto? [sim ou não]")
if(ask == "sim"){
const newproduts = prompt("digite o nome e o preço igual ao exemplo a seguir [name:preço]")
products.unshift(newproduts)
console.log(products);
}
else if(ask !== "sim"){
alert("tenha um bom dia!!")
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js2.js" defer></script>
</head>
<body>
<div class="block">
<h3>Block of Price</h3>
<ul><li>0</li></ul>
<p>Total:</p>
<button class="btn"> New Product?</button>
</div>
</body>
</html>