Question

所以我正在为学校创建考试报名表，当用户输入任何错误时，该字段的名称将变为红色（用户输入的内容将保持不变）我需要能够使用onclick事件由我的重置按钮激活但是我现在的功能不会这样做。这是我的代码：

<!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?');
        }

    function resetNames() {
document.getElementById('name').removeAttribute('style')

document.getElementById('subject').removeAttribute('style')

document.getElementById('examnumber').removeAttribute('style')

        }
    }


</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" onclick="return resetNames();" /></td>
                </tr>
        </table>
    </form>
</body>
</html>

Answer 1

尝试这样的事情

您的代码

function validateForm() {
 ....

    function resetNames() {
        document.getElementById('name').removeAttribute('style')
        document.getElementById('subject').removeAttribute('style')
        document.getElementById('examnumber').removeAttribute('style')
    }
}

更改

function validateForm() {
 ......

}

function resetNames() {
    document.getElementById('name').removeAttribute('style')
    document.getElementById('subject').removeAttribute('style')
    document.getElementById('examnumber').removeAttribute('style')
}

您将函数嵌套在另一个函数中的原因。

Answer 2

我认为你的结束括号可能在错误的地方......将JavaScript末尾的两个结束括号中的一个移到validateForm（）函数的末尾。

Javascript函数改变文本颜色

2 个答案: