需要一个javascript函数来在按钮单击时将文本重置为黑色答案

【问题标题】：Need a javascript function to reset text to black on button click需要一个javascript函数来在按钮单击时将文本重置为黑色
【发布时间】：2014-09-30 12:21:43
【问题描述】：

我正在设计一个考试报名表来获取用户姓名、科目、考试编号和级别（GCSE、AS、A2），如果用户输入错误的值，那么该字段的名称将变为红色，我需要一个 JavaScript将文本改回黑色的功能，我遇到了一些麻烦。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>

<script language="javascript" type="text/javascript">

    function validateForm() {
        var result = true;
        var msg="";

        if (document.ExamEntry.name.value=="") {
            msg+="You must enter your name \n";
            if(result) document.ExamEntry.name.focus();
            document.getElementById('name').style.color="red";
            result = false;
        }

        if (document.ExamEntry.subject.value=="") {
            msg+="You must enter the subject \n";
            if(result) document.ExamEntry.subject.focus();
            document.getElementById('subject').style.color="red";
            result = false;
        }

        if (document.ExamEntry.examnumber.value=="") {
            msg+="You must enter the exam number \n";
            if(result) document.ExamEntry.examnumber.focus();
            document.getElementById('examnumber').style.color="red";
            result = false;
        }

        if (document.ExamEntry.examnumber.value.length!=4) {
            msg+="Your exam number must be exactly 4 digits \n";
            if(result) document.ExamEntry.examnumber.focus();
            document.getElementById('examnumber').style.color="red";
            result = false;
        }

        if(msg != ""){
            alert(msg);
            return result;
        }

        var checked = null;
        var inputs = document.getElementsByName('examtype');
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked) {
                checked = inputs[i];
                break;
            }
        }

        if(checked==null) {
            alert('Please choose an option');
            return false;
        }
        else {
            return confirm('You have chosen '+checked.value+' is this correct?');
        }

    }


</script>
</head>

<body>
    <h1>Exam Entry Form</h1>
    <form name="ExamEntry" method="post" action="success.html">
      <table width="50%" border="0">
                <tr>
                                <td id="name">Name</td>
                                <td><input type="text" name="name" placeholder='Name' /></td>
                </tr>
                <tr>
                                <td id="subject">Subject</td>
                                <td><input type="text" name="subject" placeholder='Subject' /></td>
                </tr>
                <tr>
                                <td id="examnumber">Exam Number</td>
                                <td><input type="text" name="examnumber" size="4" maxlength="4" placeholder='No.'/></td>
                </tr>
                <tr>
                                <td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
                                <input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
                                <input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
                </tr>
                <tr>
                                <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
                                <td><input type="reset" name="Reset" value="Reset" /></td>
                </tr>
        </table>
    </form>
</body>
</html>

【问题讨论】：

你听说过else吗？ if (...) { red } else { black } 大多数开发人员会切换一个类。
document.getElementById('name').style.color="black";
如果您将style 的属性设置为''，它将使用默认值
您当前的代码将文本变为红色：document.getElementById('examnumber').style.color="red";。你能猜出如何将文本变为黑色吗？
对不起，我应该更好地措辞问题，我知道您只会使用与上面相同的代码，但使用黑色但是当我创建一个函数来执行此操作时它不起作用，我将如何正确编写一个单独的函数来改变文本颜色？

标签： javascript html

【解决方案1】：

在函数 validateForm() 的开头将所有文本设置为黑色。因为每次输入验证函数都会将所有文本设置为黑色，如果条件正确则输入 if 语句。

例如：

function validateForm() {
document.getElementById('name').removeAttribute('style');
....
....
...
}

但是在你点击按钮之前颜色不会改变。

否则在文本框上添加一个 onchange 函数来检查验证。

【讨论】：

感谢您的回答，但是将名称改回的函数名称与验证整个表单的函数名称相同，我应该将其更改为“resetNames”之类的名称吗？或者让它保持原样
你应该只取"document.getElementById('name').removeAttribute('style');"并将其放在您的 excistin 函数的顶部，并为您拥有的每个元素添加一行，因此代码相同但名称集主题等。