时间戳

首页 > 解决方案 > 使用 Javascript 中的数组在我的自动售货机文档中跟踪使用/存储的汽水罐

javascript - 使用 Javascript 中的数组在我的自动售货机文档中跟踪使用/存储的汽水罐

问题描述

我正在尝试编写自动售货机的脚本，以检查在有人购买之前存储了多少汽水罐，并且罐子的数量减少了一个。在我目前的尝试中，我使用变量来存储罐头数量（即$CocaCola、$Fanta、$Sprite、$Schweppes）并编写了一个名为reduceSoda()的新函数，该函数在用户每次购买罐头时将罐头数量减少一个能够。我将如何使用数组（和属性）来做到这一点？

//Setting up functions
var btn = document.getElementById("btnCoin");
var $clear = document.getElementById("clearCoin");
var sodaChoice = document.getElementById("sodaChoice");
function clearMoney() {
 $money = 0;
}

//Sets up the wallet, codes and prices for soft drinks and the soft drinks' names.
var $money = 0;
var codeSequence = ["A1", "A2", "B1", "B2"];
var $soda = ["Coca-Cola", "Fanta", "Sprite", "Schweppes"];
var $CocaCola = 5;
var $Fanta = 5;
var $Sprite = 5;
var $Schweppes = 5;
const coinValue = {'0.20': 0.20, '0.50': 0.50, '1.00': 1.00, '2.00': 2.00};
const sodaPrice = [1.55, 2.95, 1.85, 3.90];
const formatMoney = new Intl.NumberFormat('en-AU', {style: 'currency', currency: 'AUD'}).format; //Change the currency format to AUD for clarity in currency used.

//Tells document that user clicked "Insert Coin"
btn.addEventListener("click", function(){
 var coin = window.prompt("Insert any coin. (20c, 50c, $1, $2)");
  $money += coinValue[coin] || 0;//[coin] deconstructs an array from const coinValue
  if (typeof coinValue[coin] === 'undefined') alert('Invalid Choice'); //'undefined' means no value or invalid value
  console.log('You now have ' + formatMoney($money));
})

//Tells document that user clicked "Clear"
$clear.addEventListener("click", function(){
 if ($money > 0){
    clearMoney();
    console.log('You now have ' + formatMoney($money));
 } else if ($money == 0){
    var msgReturn = window.alert('You cleared nothing. Add money.');
    console.log('You now have ' + formatMoney($money));
 }
})

//Soda Choice with If-Then Statements
sodaChoice.addEventListener("click", function(){
 var sodaChoice = window.prompt("Select your code.");
 console.log(sodaChoice);

   if (sodaChoice == "A1") {
   window.alert("You selected Coca-Cola.");
   window.alert("This costs $" + sodaPrice[0] + "."); //sodaprice[0] calls the first element in "sodaPrice's" array
   window.alert(sodaPrice[0] <= $money ? "You have enough. Have a nice day." : "You don't have enough. Try again.");
   reduceSoda();
 }

   if (sodaChoice == "A2") {
   window.alert("You selected Fanta.");
   window.alert("This costs $" + sodaPrice[1] + ".");
   window.alert(sodaPrice[1] <= $money ? "You have enough. Have a nice day." : "You don't have enough. Try again.");
   reduceSoda();
 }

   if (sodaChoice == "B1") {
   window.alert("You selected Sprite.");
   window.alert("This costs $" + sodaPrice[2] + ".");
   window.alert(sodaPrice[2] <= $money ? "You have enough. Have a nice day." : "You don't have enough. Try again.");
   reduceSoda();
 }

   if (sodaChoice == "B2") {
   window.alert("You selected Schweppes");
   window.alert("This costs $" + sodaPrice[3] + ".");
   window.alert(sodaPrice[3] <= $money ? "You have enough. Have a nice day." : "You don't have enough. Try again.");
   reduceSoda();
 }
})


//Subtract the number of sodas
function reduceSoda(){
 if (sodaChoice == "A1"){
  $CocaCola -= 1;
  console.log($CocaCola);
 }
 if (sodaChoice == "A2"){
  $Fanta -= 1;
  console.log($Fanta);
 }
 if (sodaChoice == "B1"){
  $Sprite -= 1;
  console.log($Sprite);
 }
 if (sodaChoice == "B2"){
  $Schweppes -= 1;
  console.log($Schweppes);
 }
}
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Vending Machine</title>
 <link rel="stylesheet" type="text/css" href="layoutMachine.css"> <!-- Tells document to use CSS layout in the document's folder. -->
</head>

<body>
 <img src="Vending-Machine.png" width="627.5" height="917.5" alt="This is an image of a vending machine"><!-- Tells where the image is and changes the size. Also adds a comment if the image doesn't load. -->

<!-- Buttons -->
<br>

 <button id="btnCoin" class="btnStyCSS">Insert Coin</button>

<br>

 <button id="clearCoin" class="btnStyCSS">Clear</button>

<br>

 <button id="sodaChoice" class="btnStyCSS">Soda Choice</button>

<!-- This is where the script will be activated. -->
 <script src="vendingMachine.js" type="text/javascript"></script><!-- Uses JS file located in document's folder. -->
</body>
</html>

标签： javascript

解决方案

推荐阅读