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

在我的代码中，当其中一个选项超过其大小限制时，它会将相应的结果文本框之一变为红色，我通过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>

我想你在找

background-color:transparent;

这将删除红色。

清除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';
         }
     }
 }

以下是

的示例

相关内容

最新更新

热门标签：