Question

在我的代码中，当其中一个选项超出其大小限制时，它会将相应的结果文本框之一变为红色，我添加了这个solution by Troelskn清除所有HTML字段，适用于清除值不确定哪个是最好的同时删除背景颜色的方法，任何帮助赞赏

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="style" href="css/main.css" type="text/css" />
        <title>Multiple results</title>
        <script type="text/javascript">
            function sum() {

                numwidth = parseInt(document.multipleresults.width.value);
                numheight = parseInt(document.multipleresults.height.value);

                var trackWidth60 = 7.125;
                var trackWidth80 = 9.375;
                var trackWidth100 = 11.250;
                var boxSize8 = 8;

                var addToOverall = 4;
                var option1price = 1.00;
                var option2price = 3.00;
                var option3price = 6.00;
                //---------------------------------option1------------------------------------------------------------------

                if (numwidth >= 12 && numwidth <= 150) var sixty60width = (numwidth) + (trackWidth60);

                if (numheight >= 12 && numheight <= 55) var sixty60height = (numheight) + (boxSize8) + (addToOverall);

                var option60 = ((sixty60width) * (sixty60height) / 144) * (option1price);

                if (isNaN(option60)) document.getElementById("result1").style.backgroundColor = "red";
                //          document.getElementById("result1").readOnly=true;           
                else document.getElementById('result1').value = "$" + (option60).toFixed(2);
                //          document.getElementById("result1").readOnly=true;       

                //---------------------------------option2------------------------------------------------------------------

                if (numwidth >= 12 && numwidth <= 200) var e80width = (numwidth) + (trackWidth80);

                if (numheight >= 12 && numheight <= 105) var e80height = (numheight) + (boxSize8) + (addToOverall);

                var option80 = ((e80width) * (e80height) / 144) * (option2price);

                if (isNaN(option80)) document.getElementById("result2").style.backgroundColor = "red";
                //          document.getElementById("result2").readOnly=true;           
                else document.getElementById('result2').value = "$" + (option80).toFixed(2);
                //          document.getElementById("result2").readOnly=true;       


                //---------------------------------option3------------------------------------------------------------------

                if (numwidth >= 12 && numwidth <= 250) var o100width = (numwidth) + (trackWidth100);

                if (numheight >= 12 && numheight <= 155) var o100height = (numheight) + (boxSize8) + (addToOverall);

                var option100 = ((o100width) * (o100height) / 144) * (option3price);

                if (isNaN(option100)) document.getElementById("result3").style.backgroundColor = "red";
                //          document.getElementById("result3").readOnly=true;           
                else document.getElementById('result3').value = "$" + (option100).toFixed(2);
                //          document.getElementById("result3").readOnly=true;   
            }


            //---------------------------------option clear all------------------------------------------------------------------

            function clearall() {

                var elements = document.getElementsByTagName("input");
                for (var ii = 0; ii < elements.length; ii++) {
                    if (elements[ii].type == "text") {
                        elements[ii].value = "";
                    }
                }
            }
        </script>
    </head>

    <body>
        <div>
                <H2> Multiple results calculator!</h2>

        </div>
        <form name="multipleresults">
            <div>
                <label for="width">Width:</label>
                <input type="text" name="width" maxlength="5" size="10" value="" />
                <label for="height">Height:</label>
                <input type="text" name="height" maxlength="5" size="10" value="" />
                <input type="button" name="button" Value="calculate" onclick="sum()" />
                <input type="button" name="clearValue" value="Clear all fields" onclick="clearall()">
            </div>
            <div>
                <br>
                <label for="result1">Option1:</label>
                <input type="text" id="result1" name="result1" maxlength="6" size="10" value="" />
                <label for="result2">Option2:</label>
                <input type="text" id="result2" name="result2" maxlength="6" size="10" value="" />
                <label for="result3">Option3:</label>
                <input type="text" id="result3" name="result3" maxlength="6" size="10" value="" />
            </div>
        </form>
    </body>

</html>

Answer 1

我认为你正在寻找

background-color:transparent;

这将删除红色。

Answer 2

您应该做的就是清除background-color添加

elements[ii].style.backgroundColor = '';

到clearall();循环

function clearall() {

     var elements = document.getElementsByTagName("input");
     for (var ii = 0; ii < elements.length; ii++) {
         if (elements[ii].type == "text") {
            elements[ii].value = "";
            elements[ii].style.backgroundColor = 'transparent';
         }
     }
 }

Here is an example

清除值时，将输入背景颜色返回到原始状态

2 个答案: