Javascript功能改变文字颜色

-2

因此，我为学校创建考试报名表单，当用户输入任何错误时，该字段的名称将变为红色（用户输入的内容将保持不变）我需要能够用我的重置按钮激活的onclick事件来做到这一点，但我现在拥有的功能不会这样做。这里是我的代码：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?'); 
     } 

    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>

来源

2014-10-02 Dan Bowers

帮助我们来帮助你：请仅发布相关代码 - 不是全部。 – Utkanos 2014-10-02 12:22:11

我认为您的右花括号可能位于错误的位置......将您的JavaScript末尾的两个花括号之一移动到validateForm（）函数的末尾。

来源

2014-10-02 12:25:22 danmullen

尝试这样的事情

代码

function validateForm() { 
.... 

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

CHANGE TO

function validateForm() { 
...... 

} 

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

原因你嵌套了一个内部的功能一个其他。

来源

2014-10-02 12:24:30

Javascript功能改变文字颜色

回答

相关问题