-2

After my last question, I tried to use the JS file and it wouldn't work alongside clicking an HTML button to begin the functions in the JS file; After the JS script asks for money and the code for a soda product, I couldn't restart the function again from clicking "BEGIN" in my HTML page.

How do I solve this?

*I would like to challenge myself to script Javascript functions without using the function in HTML.

*I am using AUD denominations since I live in Australia.

var beginMachine = document.getElementById("beginMachine");
beginMachine.addEventListener("click", vendingFunction);

function vendingFunction() {
  var $money = 0;
  var codeSequence = ["A1", "A2", "B1", "B2"];
  var $soda = ["Coca-Cola", "Fanta", "Sprite", "Schweppes"];
  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.

  return {
      insertCoin: () => { //The arrow function '=>' acts a simple indicator to call a function
          var coin = window.prompt("Insert any coin. (20c, 50c, $1, $2)");
          $money += coinValue[coin] || 0;
          if (typeof coinValue[coin] === 'undefined') alert('Invalid Choice'); //'undefined' means no value or invalid value
          console.log('You now have ' + formatMoney($money));
      },
      selectItem: () => {
          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." : "You don't have enough.");
          }

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

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

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

const app = vendingFunction();
for (let i = 0; i < 5; i++) {
  app.insertCoin();
}
app.selectItem();
//Code from dave in StackOverflow <https://stackoverflow.com/questions/67929579/how-do-you-program-this-javascript-file-for-allowing-more-than-one-denominations/67929809
//See <https://www.youtube.com/watch?v=qsEtXR38IQ8&ab_channel=EnvatoTuts%2B>
body {background-color: lightgrey;}

.vendingMachine
{
    position:static;
    top: 0;
    left: 0;
    z-index: 1;
}

.mainFont 
{
    font-family: Arial, sans-serif;
    font: 12px/14px;
}
<!DOCTYPE html>
<html> <!-- Tells this document is coded in HTML5 -->
<head>
<link rel="stylesheet" href="0az_style.css"><!-- Links to the CSS file that handles the layout and design of the webiste, specifically the buttons' and vending machine's positions. -->
    <title>Vending Machine</title> <!-- Names the browser tab -->
</head>


<!--Calls the mainFont variable in the CSS file to change every letter into Arial-->
<body class="mainFont"><!--Changes every letter to a specific font-->

    <!--Creates a large heading like Heading 1 in Word-->
    <h1>Welcome to the Vending Machine</h1>

    <!--<div> generically stores CSS code but for these lines, Javascript is called upon to activate the remaining scripts-->
    <div> 
        <img    class="fit-picture" 
                src="Vending-Machine-alt.png"
                width="1255"
                height="1835"
                alt="Picture of a vending machine.">
    </div>
    <br>






    <!-- From https://stackoverflow.com/questions/9530954/how-to-call-external-javascript-function-in-html -->
    <!-- Adding <script type="text/javascript"></script> calls this function right away. Perhaps use inline JS to tell the button to load JS script after the page loads.-->
    <button id="beginMachine">BEGIN</button>




    <br>
<!--<a href= '0az_how_to_use.html'> links to the manual page in this project's main folder-->
<h2><a href= '0az_how_to_use.html'>How to use the vending machine</a></h2>
</body>
</html>
mattydevelopst
  • 3
  • 3
  • 1
    You should simplify your code as much as possible, before posting it to stackoverflow. Right now we need unnessesary delve in this complex structure, trying to find out what you are trying to archive, and still I could not find button on page because it's hidden before table – AidOnline01 Jun 24 '21 at 23:28
  • I see you are using code from an answer to your other question, but I don't see where you accepted that answer or at least voted for one. – vanowm Jun 24 '21 at 23:31

1 Answers1

0

Your vendingFunction() function returns an object with functions, it doesn't execute them. You need another function that would execute them:

var beginMachine = document.getElementById("beginMachine");
beginMachine.addEventListener("click", start);

function vendingFunction() {

  var $money = 0;
  var codeSequence = ["A1", "A2", "B1", "B2"];
  var $soda = ["Coca-Cola", "Fanta", "Sprite", "Schweppes"];
  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.

  return {
      insertCoin: () => { //The arrow function '=>' acts a simple indicator to call a function
          var coin = window.prompt("Insert any coin. (20c, 50c, $1, $2)");
          $money += coinValue[coin] || 0;
          if (typeof coinValue[coin] === 'undefined') alert('Invalid Choice'); //'undefined' means no value or invalid value
          console.log('You now have ' + formatMoney($money));
      },
      selectItem: () => {
          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." : "You don't have enough.");
          }

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

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

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

function start()
{
  const app = vendingFunction();
  for (let i = 0; i < 5; i++) {
    app.insertCoin();
  }
  app.selectItem();
}
start();
//Code from dave in StackOverflow <https://stackoverflow.com/questions/67929579/how-do-you-program-this-javascript-file-for-allowing-more-than-one-denominations/67929809
//See <https://www.youtube.com/watch?v=qsEtXR38IQ8&ab_channel=EnvatoTuts%2B>
body {background-color: lightgrey;}

.vendingMachine
{
    position:static;
    top: 0;
    left: 0;
    z-index: 1;
}

.mainFont 
{
    font-family: Arial, sans-serif;
    font: 12px/14px;
}
<!DOCTYPE html>
<html> <!-- Tells this document is coded in HTML5 -->
<head>
<link rel="stylesheet" href="0az_style.css"><!-- Links to the CSS file that handles the layout and design of the webiste, specifically the buttons' and vending machine's positions. -->
    <title>Vending Machine</title> <!-- Names the browser tab -->
</head>


<!--Calls the mainFont variable in the CSS file to change every letter into Arial-->
<body class="mainFont"><!--Changes every letter to a specific font-->

    <!--Creates a large heading like Heading 1 in Word-->
    <h1>Welcome to the Vending Machine</h1>

    <!--<div> generically stores CSS code but for these lines, Javascript is called upon to activate the remaining scripts-->
    <div> 
        <img    class="fit-picture" 
                src="Vending-Machine-alt.png"
                width="1255"
                height="1835"
                alt="Picture of a vending machine.">
    </div>
    <br>






    <!-- From https://stackoverflow.com/questions/9530954/how-to-call-external-javascript-function-in-html -->
    <!-- Adding <script type="text/javascript"></script> calls this function right away. Perhaps use inline JS to tell the button to load JS script after the page loads.-->
    <button id="beginMachine">BEGIN</button>




    <br>
<!--<a href= '0az_how_to_use.html'> links to the manual page in this project's main folder-->
<h2><a href= '0az_how_to_use.html'>How to use the vending machine</a></h2>
</body>
</html>
vanowm
  • 9,466
  • 2
  • 21
  • 37