0

问题： 折扣价格计算 创建一个网页，计算特定季节的产品折扣。具有折扣率的季节是夏季 (10%)、新年 (5%) 和清仓 (15%)。折扣是根据产品的价格计算的。网页应该看起来像

网页

结果网页应如下所示

网页

代码：

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>

评估时出错：

失败1：

com.gargoylesoftware.htmlunit.ScriptException: 缺失；before 语句（文件中的脚本：discountprice.html 从 (90, 17) 到 (125, 18)#108）构建信息：版本：'2.52.0'，修订：'4c2593cfc3689a7fcd7be52549167e5ccc93ad28'，时间：'2016-02-11 11:22:43'系统信息：主机：'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.version：HtmlUnitDriver

失败2：

com.gargoylesoftware.htmlunit.ScriptException: 缺失；before 语句（文件中的脚本：discountprice.html 从 (90, 17) 到 (125, 18)#108）构建信息：版本：'2.52.0'，修订：'4c2593cfc3689a7fcd7be52549167e5ccc93ad28'，时间：'2016-02-11 11:22:43'系统信息：主机：'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.version：HtmlUnitDriver

失败3：

com.gargoylesoftware.htmlunit.ScriptException: 缺失；before 语句（文件中的脚本：discountprice.html 从 (90, 17) 到 (125, 18)#108）构建信息：版本：'2.52.0'，修订：'4c2593cfc3689a7fcd7be52549167e5ccc93ad28'，时间：'2016-02-11 11:22:43'系统信息：主机：'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.version：HtmlUnitDriver

4

1 回答 1

0

你在这里错过了一个时期

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>

于 2021-05-20T20:14:05.280 回答