What is missing from my discount code to make this work? Am I missing a variable?

I thought I had everything correct and I still can’t seem to figure out why the function isn’t working out the way it is supposed to. I have this issue where the code is having a reference error but I’m not sure how to define the function. I also put it through the W3 validator but that’s not telling me anything.

''''
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>discount amount</title>

</head>

<body>
    <script>
        /* Input: purchase amount
         * Processing: determine through if statements if they get a 
discount
         * Output: final price after tax
         */
        // Computes and returns a discounted purchase amount.
        function getDiscountedAmount(purchase) {
         var purchase = 
parseInt(document.getElementById('purchase').value);
            var dayOfWeek = new Date().getDay();
            var output = document.querySelector("#output");
        
            let rate;
            if (purchase < 50) {
                rate = 0.06;
            }
            else if (purchase < 100 && [2, 3].includes(dayOfWeek)) {
                rate = 0.06;
            }
            else if (purchase < 500 && [2, 3].includes(dayOfWeek)) {
                rate = 0.06;
            }
     
            let discount = purchase * rate;
            return purchase - discount;
            output.innerHTML = "$" + String(getDiscountedAmount(200));
        }
        </script>
Please enter your final price: <input type="text" id="purchase" size="5"> 
<br>  
<button type="button" onclick="getDiscountedAmount(purchase)">discount? 
</button>  
<div id="output"></div>  
</body>
</html>
    
''''

3 thoughts on “What is missing from my discount code to make this work? Am I missing a variable?”

  1. The first line of your function already is wrong, you’re trying to get a float number from nothing and you’re overriding your input parameter to the function

    var purchase = parseFloat();
    

    Try:

    purchase = parseFloat(purchase);
    

    so that it uses your input parameter.

    Also I’m not too sure about your date comparison dayOfWeek == (2, 3), I don’t know if that works, I’ve never seen that before, I personally use [2, 3].includes(dayOfWeek)

    And lastly your function returns a value but then you don’t see that value anywhere, try using

    console.log(getDiscountedAmount(200)) or whatever your price is

    In terms of your input and output you want to use DOM manipulation to get the input and show the output.

    If you want to see the value in your "output" then

    var output = document.querySelector("#output");
    output.innerHTML = "$" + String(getDiscountedAmount(200));
    

    Would be a simple DOM mechanism, but it’s not the cleanest

    One more tip is to put your script tags lastly in the body, because you want all your HTML elements "defined" first before you try to access them

    Altogether a cleaner version of your code:

        <!DOCTYPE HTML>
        <html lang="en-us">
        <head>
            <meta charset="utf-8">
            <title>discount amount</title>
        </head>
        <body>
        Please enter your final price: <input type="text" id="myInput" size="5" /><br />  
        <button type="button" id="myButton">discount?</button>  
        <div id="myOutput"></div>
    <script>
        var myInput = document.querySelector("#myInput");
        var myOutput = document.querySelector("#myOutput");
        var myButton = document.querySelector("#myButton");
        myButton.onclick = function() {
            // Computes and returns a discounted purchase amount.
            var purchase = parseFloat(myInput.value);
            var dayOfWeek = new Date().getDay();
            var rate;
            if (purchase < 50) {
                rate = 0.06;
            }
            else if (purchase < 100 && [2,3].includes(dayOfWeek)) {
                rate = 0.06;
            }
            else if (purchase < 1000) {
                rate = 0.025;
            }
            else {
                rate = 0.03;
            }
            let discount = purchase * rate;
            var finalPrice = purchase - discount;
            output.innerHTML = "$" + String(finalPrice);
        };
        </script>  
        </body>
        </html>
    

    I changed around some ID’s and moved the onclick into your JavaScript for cleaner code overall, as we like to separate the HTML from the JS

    Reply
  2. When you load your script you get an Uncaught SyntaxError because you closed your function with two }. To fix this just delete line 31.

    In your first line of the function you are using parseFloat(); wrong:

    var purchase = parseFloat();
    

    Do:

    var purchase = parseFloat(purchase);
    

    Than you need to get your input number.
    getDiscountedAmount(purchase) in the onclick event doesn’t work.
    You can use this:

    var purchase = document.getElementById("purchase").value; // get value from text field
    purchase = parseFloat(purchase); // convert to float
    

    In the end you have to do this to show the number in you output div:

    let output = purchase - discount;
    document.getElementById("output").innerText = output; // set discont into your output div
    return output;
    

    Here is your code and how i fixed it:

    <!DOCTYPE HTML>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <title>discount amount</title>
    <script>
    /* Input: purchase amount
     * Processing: determine through if statements if they get a discount
     * Output: final price after tax
     */
    // Computes and returns a discounted purchase amount.
    function getDiscountedAmount(purchase) {
        var purchase = document.getElementById("purchase").value; // get value from text field
        purchase = parseFloat(purchase); // convert to float
        var dayOfWeek = new Date().getDay();
        var rate;
        if (purchase < 50) {
            rate = 0.06;
        }
        else if (purchase < 100 && dayOfWeek ==(2,3)) {
            rate = 0.06;
        }
        else if (purchase < 1000) {
            rate = 0.025;
        }
        else {
            rate = 0.03;
        }
        let discount = purchase * rate;
        let output = purchase - discount;
        document.getElementById("output").innerText = output; // set discont into your output div
        return output;
    }
    </script>
    </head>
    
    <body>
    Please enter your final price: <input type="text" id="purchase" size="5"><be>  
    <button type="button" onclick="getDiscountedAmount()">discount?</button>  
    <div id="output"></div>  
    </body>
    </html>

    I didn’t change your return statement and dayOfWeek because i don’t know how you exactly want to use it.

    Reply
  3. Here is what you are looking for:

    <!DOCTYPE HTML>
    <html lang="en-us">
      <head>
        <meta charset="utf-8">
        <title>discount amount</title>
        <script>
          function getDiscountedAmount() {
            //Gets the value of your input
            var purchase = parseFloat(document.getElementById('purchase').value);
            var dayOfWeek = new Date().getDay();
            var rate;
            if (purchase < 50) {
               rate = 0.06;
            }
            else if (purchase < 100 && (dayOfWeek == 2 || dayOfWeek == 3)) {
               rate = 0.06;
            }
            else if (purchase < 1000) {
              rate = 0.025;
            }
            else {
              rate = 0.03;
            }
            let discount = purchase * rate;
            
            //Puts the output inside of your "output" <div>
            document.getElementById("output").innerHTML = (purchase - discount);
          }
        </script>
      </head>
      <body>
        Please enter your final price: <input type="text" id="purchase" size="5"><be>  
        <button type="button" onclick="getDiscountedAmount()">discount?</button>  
        <div id="output"></div>  
      </body>
    </html>
    Reply

Leave a Comment