正确的HTML组件div必须使用适当的约束false

时间:2017-07-29 00:59:48

标签: javascript html html5 css3

规格:

创建一个网页,计算特定季节产品的折扣。折扣率的季节是夏季(10%),新年(5%)和许可(15%)。折扣按产品价格计算。网页应该看起来像

网页使用HTML设计,格式和样式使用CSS完成。客户端验证是使用JavaScript执行的。

网页要求

网页名称为“index.html”。网页背景颜色应为#99FFFF。标签“折扣价格”应该是标题标签(h1),并且应该是斜体粗体,居中和栗色。

产品名称,价格和季节应在表格内。产品名称和价格为text框,标签名称分别为“name”和“price”,season是一个标签名为“season”的下拉框。下拉框将具有以下值和显示值

    ·         summer           -           SUMMER SALE

    ·         newyear          -           NEW YEAR SALE

    ·         clearance        -           CLEARANCE SALE

产品名称不应为空,并且只应包含字母和空格。价格文本框不能为空,number value大于零。

该表应该是边距左边对齐35%和外边框样式的实心5px和30%宽度。 element和边框之间的空格必须为10px。

应提供值为“GET DISCOUNT PRICE”的提交按钮。单击该按钮,网页将计算产品的折扣价格。

结果必须显示在2个div标签中,其中第一个将具有名为“discount”的id,并显示产品的折扣%,第二个将具有名为“result”的id,并显示产品的折扣价。 div标记都应centerbolder文字对齐。折扣价的font必须是斜体#FF0000和40px尺寸,折扣%必须是25px。为div,折扣和结果设置单独的样式

CSS:

{
    background-color: #99FFFF;
}
h1{
    color:maroon;
    text-align:center;
    font-weight: bold;
    font-style:italic;
}
table,td{
    border-style: solid;
    padding: 10px;
    border-width: 5px;
    margin-left: 35%;
    width: 30%;
}
div{
    text-align:center;
    font-weight: bold;
}
#result{
    font-style:italic;
    color:#FF0000 ;
    font-size:40px;
}
#discount{
    font-size:25px;
}

JS:

function discount()
{
    var s = document.getElementById("season").value;
    var p = document.getElementById("price").value;
    var r;

    if (s=='summer')
    {
        document.getElementById("discount").innerHTML = "The discount is 10%";
        r=(p-(p*0.1));
    }
    else if(s=='newyear')
    {
        document.getElementById("discount").innerHTML = "The discount is 5%";
        r=(p-(p*0.05));
    }
    else
    {
        document.getElementById("discount").innerHTML = "The discount is 15%";
        r=(p-(p*0.15));
    }

    document.getElementById("result").innerHTML = "The discount price: Rs " + r;
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>index.html</title>
</head>
<body>
    <h1>DISCOUNT PRICE</h1>
        <form>
            <table>
                <tr>
                    <td>Product Name</td>
                    <td><input type="text" name="name" id="name" required pattern="[a-zA-Z ]+"></td>
                </tr>
                <tr>
                    <td>Product Price</td>
                    <td><input type="number" name="price"  id="price" min="1"  ></td>
                </tr>
                <tr>
                    <td>Season</td>
                    <td>
                        <select id="season" name="season">
                            <option value="summer">SUMMER SALE</option>
                            <option value="newyear">NEW YEAR SALE</option>
                            <option value="clearance">CLEARANCE SALE</option>
                        </select>
                    </td>
                </tr>
            </table>
            <center><input type="button" value="GET DISCOUNT PRICE" onclick="discount()"></center>
        </form>
        <div id="discount"></div>
        <div id="result"></div>
    </body>
</html>

错误:

  

testWeb(jspackage.JSAssignmentDiscount):   正确的HTML组件div必须与适当的约束一起使用   假

3 个答案:

答案 0 :(得分:0)

按照上述“价格”限制使用以下行 -

<input type="text" name="price" id="price" pattern="[\d]+" min="1" required> 

答案 1 :(得分:0)

您可以将其用于价格组件:

<input type="text" name="price" required pattern="[1-9]{1}[1-9]*">

答案 2 :(得分:-1)

应该显示一个带有“获取折扣价格”值的提交按钮。 只需阅读此行即可。他使用了type =“ button”,但应为type =“ submit” 实际上我现在正在做同样的问题。