0

Question : Discount Price Calculation Create a web page which calculates the discount for the product for the specific season. The seasons with their discount rates are summer (10%), new year (5%), and clearance (15%). The discount is calculated on the price of the product. The web page should look like

web page

The outcome webpage should look as

web page

Code:

function calculate() {
  var se = document.getElementById("season").value;
  var pr = document.getElementById("price").value;
  var dist;

  if (se == "summer") {
    document.getElementById("discount").innerHTML = "The discount is 10%";
    dist = (pr - (pr * 0.1));
    document.getElementById("result").innerHTML = "The discounted price : Rs " + dist;
    return false;

  } else if (se == "newyear") {
    document.getElementById("discount") innerHTML = "The discount is 5% ";
    dist = (pr - (pr * 0.05));
    document.getElementById("result").innerHTML = "The discounted price : Rs " + dist;
    return false;

  } else if (se == "clearance") {
    document.getElementById("discount").innerHTML = "The discount is 15%";
    dist = (pr - (pr * 0.15));
    document.getElementById("result").innerHTML = "The discounted price : Rs " + dist;
    return false;

  }
  return false;
}
body {
  background-color: #99FFFF;
}

h1 {
  font-style: italic;
  font-weight: bold;
  text-align: center;
  color: #b03060;
}

table {
  float: left;
  width: 35%;
  border: 5px solid;
  border-width: 30%;
  padding: 10px;
}

#submit {
  float: left;
  width: 45%;
}

tr,
td {
  padding: 10px;
  border-style: solid;
  border-width: 2px;
}

#result {
  font-style: italic;
  color: #FF0000;
  font-size: 40px;
  text-align: center;
  font-weight: bold;
}

#discount {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
<!-- This is a partial code. Implement the essential codes required -->
<!-- Do not modify the name or id of the components given in the code skeleton -->
<h1>DISCOUNT PRICE</h1>
<form onsubmit="return calculate()">
  <table>
    <tr>
      <td>Product Name</td>
      <td><input type="text" name="name" id="name" pattern="^[A-Za-z- ]+$" required></td>
    </tr>
    <tr>
      <td>Product Price</td>
      <td><input type="number" name="price" id="price" min="15001" required></td>
    </tr>
    <tr>
      <td>Season</td>
      <td>
        <select name="season" id="season">
          <option value="summer">SUMMER SALE</option>
          <option value="newyear">NEW YEAR SALE</option>
          <option value="clearance">CLEARANCE SALE</option>
        </select>
      </td>
    </tr>
  </table>
  <br>
  <input type="submit" name="submit" id="submit" value="GET DISCOUNT PRICE">
  <div id="discount"></div>
  <div id="result"></div>
</form>

Error while evaluating:

Fail 1:

com.gargoylesoftware.htmlunit.ScriptException: missing ; before statement (script in file:discountprice.html from (90, 17) to (125, 18)#108)Build info: version: '2.52.0', revision: '4c2593cfc3689a7fcd7be52549167e5ccc93ad28', time: '2016-02-11 11:22:43'System info: host: 'ip-172-31-11-55', ip: '172.31.11.55', os.name: 'Linux', os.arch: 'amd64', os.version: '4.4.0-1128-aws', java.version: '1.8.0_292'Driver info: driver.version: HtmlUnitDriver

Fail 2:

com.gargoylesoftware.htmlunit.ScriptException: missing ; before statement (script in file:discountprice.html from (90, 17) to (125, 18)#108)Build info: version: '2.52.0', revision: '4c2593cfc3689a7fcd7be52549167e5ccc93ad28', time: '2016-02-11 11:22:43'System info: host: 'ip-172-31-11-55', ip: '172.31.11.55', os.name: 'Linux', os.arch: 'amd64', os.version: '4.4.0-1128-aws', java.version: '1.8.0_292'Driver info: driver.version: HtmlUnitDriver

Fail 3:

com.gargoylesoftware.htmlunit.ScriptException: missing ; before statement (script in file:discountprice.html from (90, 17) to (125, 18)#108)Build info: version: '2.52.0', revision: '4c2593cfc3689a7fcd7be52549167e5ccc93ad28', time: '2016-02-11 11:22:43'System info: host: 'ip-172-31-11-55', ip: '172.31.11.55', os.name: 'Linux', os.arch: 'amd64', os.version: '4.4.0-1128-aws', java.version: '1.8.0_292'Driver info: driver.version: HtmlUnitDriver

biberman
  • 5,606
  • 4
  • 11
  • 35
Jazz
  • 13
  • 2

1 Answers1

0

You're missing a period here

document.getElementById("discount")innerHTML="The discount is 5% ";


<!-- This is a partial code. Implement the essential codes required --> 
<!-- Do not modify the name or id of the components given in the code skeleton -->
<!DOCTYPE html>
<html>
    <head>
   <style>
    body
    {
        background-color:#99FFFF;
    }
    
    h1
    {
        font-style:italic;
        font-weight:bold;
        text-align:center;
        color:#b03060;
    }
    
    table
    {
        float:left;
        width:35%;
        border:5px solid;
        border-width:30%;
        padding:10px;
    }
    
    #submit
    {
        float:left;
        width:45%;

    }
    
    tr,td
    {
        padding: 10px;
        border-style:solid;
        border-width:2px;
    }
    
    #result
    {
        font-style: italic;
        color:#FF0000;
        font-size:40px;
        text-align:center;
        font-weight:bold;
    }
    
    #discount
    {
        font-size:25px;
        font-weight:bold;
        text-align:center;
    }
    
</style>
</head>
<body>
    <h1>DISCOUNT PRICE</h1>
    <form onsubmit="return calculate()">
        <table>
            <tr>
                <td>Product Name</td>
                <td><input type="text"  name="name" id="name" pattern="^[A-Za-z- ]+$" required></td>
            </tr>
            <tr>
                <td>Product Price</td>
                <td><input type="number" name="price"  id="price" min="15001" required></td>
            </tr>
            <tr>
                <td>Season</td>
                <td>
                    <select name="season" id="season">
                        <option value="summer">SUMMER SALE</option>
                        <option value="newyear">NEW YEAR SALE</option>
                        <option value="clearance">CLEARANCE SALE</option>
                    </select>
                </td>
            </tr>
        </table>
        <br>
    <input type="submit" name="submit" id="submit" value="GET DISCOUNT PRICE">
    <div id="discount"></div>
    <div id="result"></div>
    </form>
    
    <script>
        function calculate()
        {
            var se=document.getElementById("season").value;
            var pr=document.getElementById("price").value;
            var dist;
            
            if(se=="summer")
            {
                document.getElementById("discount").innerHTML="The discount is 10%";
                dist=(pr-(pr*0.1));
                document.getElementById("result").innerHTML="The discounted price : Rs "+dist;
                return false;
                
            }
            
            else if(se=="newyear")
            {
                document.getElementById("discount").innerHTML="The discount is 5% ";
                dist=(pr-(pr*0.05));
                document.getElementById("result").innerHTML="The discounted price : Rs "+dist;
                return false;
                 
            }
            
            else if(se=="clearance")
            {
                document.getElementById("discount").innerHTML="The discount is 15%";
                dist=(pr-(pr*0.15));
                document.getElementById("result").innerHTML="The discounted price : Rs "+dist;
                return false;
                
            }
           return false;
        }   
    </script>
</body>
</html>
Nikki9696
  • 6,260
  • 1
  • 28
  • 23