1. 首页
  2. 问答
  3. 外部JavaScript文件不能正常工作，需要帮​​助

外部JavaScript文件不能正常工作，需要帮​​助

2014-11-02 121 views
0

所以我有一个外部JavaScript文件。它链接到我的html代码，但是没有任何代码正在生效，而且我似乎无法找到问题。 这里是外部JavaScript文件，其触发与onfocus事件触发外部JavaScript文件不能正常工作，需要帮​​助

function inputFocus(element) 
{ 
    element.background="#FFFF00"; 
} 
function showTick(containerId, imgId) 
{ 
    document.getElementById(imgId).src="./images/tick/tick5.png"; 
    document.getElementById(containerId).style.visibility="visible"; 
} 
function showX(containerId, imgId) 
{ 
    document.getElementById(imgId).src="./images/x/x1.png"; 
    document.getElementById(containerId).style.visibility="visible"; 
} 
function highlightValid(element, containerId, imgId) 
{ 
    element.borderColor="#007A00"; 
    element.borderWidth="2px"; 
    showTick(containerId, imgId); 
} 
function highlightInvalid(element, containerId, imgId) 
{ 
    element.borderColor="red"; 
    element.background="#FF4D4D"; 
    showX(containerId, imgId); 
} 
function validateName(element, containerId, imgId) 
{ 
    document.getElementById(containerId).style.visibility="hidden"; 
    if(element.value==null || element.value=="") 
    { 
     highlightInvalid(element, containerId, imgId); 
    } 
    else 
    { 
     highlightValid(element, containerId, imgId); 
    } 
} 
function validateEmail(element, containerId, imgId) 
{ 
    document.getElementById(containerId).style.visibility="hidden"; 
    var atpos=element.value.indexOf("@"); 
    var dotpos=element.value.lastIndexOf("."); 
    if(atpos<1||dotpos<=atpos+2||dotpos+2>=element.value.length) 
    { 
     highlightInvalid(element, containerId, imgId); 
    } 
    else 
    { 
     highlightValid(element, containerId, imgId); 
    } 
} 
function getCurrentDate() 
{ 
    var date=new Date(); 
    var day=date.getDate(); 
    var month=date.getMonth()+1; 
    var year=date.getYear(); 
    if (day<10) 
    { 
    day="0"+day; 
    } 
    if(month<10) 
    { 
    month="0"+month; 
    } 
    date = year+"-"+month+"-"+day; 
    return date; 
} 
function validateDate(element, containerId, imgId) 
{ 
    document.getElementById(containerId).style.visibility="hidden"; 
    if(element.value<getCurrentDate() || element.value==null || element.value=="") 
    { 
     highlightInvalid(element, containerId, imgId); 
    } 
    else 
    { 
     highlightValid(element, containerId, imgId); 
    } 
} 
function validateAge(element, containerId, imgId) 
{ 
    document.getElementById(containerId).style.visibility="hidden"; 
    if(isNaN(element.value) || element.value<1) 
    { 
    highlightInvalid(element, containerId, imgId); 
    } 
    else 
    { 
    highlightValid(element, containerId, imgId); 
    } 
}

即使是很简单的inputFocus功能。

HTML：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>TOD - TRUTH</title> 
 
    <style type="text/css"> 
 
    body {} div.mainDiv { 
 
     position: fixed; 
 
     background: "#FFFFFF"; 
 
     width: 60%; 
 
     border-style: dotted; 
 
     border-radius: 15px; 
 
     border-width: 1px; 
 
     padding: 10px; 
 
     top: 8%; 
 
     left: 50%; 
 
     margin-left: -30%; 
 
    } 
 
    label.personalInfo { 
 
     display: inline-block; 
 
     float: left; 
 
     clear: left; 
 
     width: 175px; 
 
     text-align: left; 
 
    } 
 
    input.non-radio { 
 
     display: inline-block; 
 
     float: left; 
 
    } 
 
    label.radioLabels { 
 
     display: inline-block; 
 
     width: 200px; 
 
    } 
 
    input.roundedInput { 
 
     border-radius: 8px; 
 
     padding-left: 5px; 
 
     padding-right: 5px; 
 
    } 
 
    span.validationChecks { 
 
     visibility: hidden; 
 
    } 
 
    </style> 
 
    <script type="text/javascript" src="javascript.js"> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div name="mainDiv" id="mainDiv" class="mainDiv"> 
 
    <form> 
 
     <p align="center"> 
 
     <img src="./" alt="truth"> 
 
     </p> 
 
     <label for="fullName" class="personalInfo">Full Name:</label> 
 
     <input type="text" name="fullName" id="fullName" class="non-radio roundedInput" placeholder="John Doe" onfocus="inputFocus(this)" onblur="validateName(this, nameSpan, nameImg)" required/><span id="nameSpan" class="validationChecks"><img src="" id="nameImg"/></span> 
 
     <br/> 
 
     <br/> 
 
     <label for="yEmail" class="personalInfo">Your Email:</label> 
 
     <input type="email" name="yEmail" id="yEmail" class="non-radio roundedInput" placeholder="[email protected]" onfocus="inputFocus(this)" onblur="validateEmail(this, mEmailSpanSpan, mEmaIImg)" required/><span id="mEmailSpan" class="validationChecks"><img src="" id="mEmailImg"/></span> 
 
     <br/> 
 
     <br/> 
 
     <label for="age" class="personalInfo">Your Age:</label> 
 
     <input type="number" name="age" id="age" class="non-radio roundedInput" placeholder="e.g. 13" onfocus="inputFocus(this)" onblur="validateAge(this, ageSpan, ageImg)" max="150" required/><span id="ageSpan" class="validationChecks"><img src="" id="ageImg"/></span> 
 
     <br/> 
 
     <br/> 
 
     <label for="sex" class="personalInfo">Are you male or female:</label> 
 
     <input type="radio" name="sex" id="sex" class="radioLabels" value="male" required/>M &nbsp; 
 
     <input type="radio" name="sex" id="sex" class="radioLabels" value="female" required/>F 
 
     <br/> 
 
     <br/> 
 
     <label for="rEmail" class="personalInfo">Recipient's Email:</label> 
 
     <input type="email" name="rEmail" id="rEmail" class="non-radio roundedInput" placeholder="[email protected]" onfocus="inputFocus(this)" onblur="validateEmail(this, rEmailSpan, rEmailImg)" required/><span id="rEmailSpan" class="validationChecks"><img src="" id="rEmailImg"/></span> 
 
     <br/> 
 
     <br/> 
 
     <label for="date" class="personalInfo">Date to send question:</label> 
 
     <input type="date" name="date" id="date" class="non-radio" min="2014-11-01" onfocus="inputFocus(this)" onblur="validateDate(this, dateSpan, dateImg)" required/><span id="dateSpan" class="validationChecks"><img src="" id="dateImg"/></span> 
 
     <br/> 
 
     <br/> 
 
     <hr/> 
 
     <br/> 
 
     <p align="left" name="questionsInstructions">Select <b>ONE</b> of the following questions to send.</p> 
 
     <br/> 
 
     <input type="radio" name="question" id="question" value="1" /> 
 
     <label for="q" class="radioLabels">Have you ever repeated a grade level? &nbsp;</label> 
 
     <input type="radio" name="question" id="question" value="2" /> 
 
     <label for="q" class="radioLabels">Did you skip your last class? &nbsp;</label> 
 
     <input type="radio" name="question" id="question" value="3" /> 
 
     <label for="q" class="radioLabels">Can you drive a car? &nbsp;</label> 
 
     <br/> 
 
     <br/> 
 
     <input type="radio" name="question" id="question" value="4" /> 
 
     <label for="q" class="radioLabels">Do watch anime? &nbsp;</label> 
 
     <input type="radio" name="question" id="question" value="5" /> 
 
     <label for="q" class="radioLabels">Did you vote for Portia? &nbsp;</label> 
 
     <input type="radio" name="question" id="question" value="6" /> 
 
     <label for="q" class="radioLabels">Did you enter your real name and age? &nbsp;</label> 
 
     <br/> 
 
     <hr/> 
 
     <br/> 
 
     <p name="pOfSubmit" id="pOfSubmit" align="center"> 
 
     <input type="image" src="./images/button.png" alt="Submit Form" /> 
 
     </p> 
 
    </form> 
 
    </div> 
 
    <footer> 
 
    <p align="center">&copy; Emile Keith - 1400282</p> 
 
    </footer> 
 
</body> 
 

 
</html>

来源

2014-11-02 InfinityCounter

+0

你在哪里包含该文件？确保它有正确的文件路径。 – 2014-11-02 05:42:31

+0

可以创建http://jsfiddle.net/ – Fahad 2014-11-02 05:42:57

+0

@VenkataPanga，它们在该文件中定义，但我想你也会想看到html。我将编辑问题以显示html。 – InfinityCounter 2014-11-02 05:58:13

回答

1

更改功能如下图所示，background，borderWidth ...是样式属性，你错过添加style

function inputFocus(element) 
{ 
    element.style.background="#FFFF00"; 
}

同样的道理也适用于所有其他失踪的地方。

入住在其他功能上也是相同的 highlightValid，highlightInvalid

在HTML中的事件处理程序调用，你应该确保你发送PARAMS用正确的语法。
让我们以一个元素为学习：

<input type="text" name="fullName" id="fullName" 
     class="non-radio roundedInput" placeholder="John Doe" 
     onfocus="inputFocus(this)" 
     onblur="validateName(this, nameSpan, nameImg)" required/>

在函数调用validateName（这一点，nameSpan，nameImg）
PARAM＃1：this指当前元素的实例。
PARAM＃2：nameSpan应该是字符串，我们应包括他们在像'nameSpan'报价，如果我们不加引号JS引擎包括考虑，如JavaScript var是定义了一些，还有什么地方，因此它会抛出你错误。 param＃3：也与＃2类似。

所以，你必须正确的，因为低于上述元素：

<input type="text" name="fullName" id="fullName" 
     class="non-radio roundedInput" placeholder="John Doe" 
     onfocus="inputFocus(this)" 
     onblur="validateName(this, 'nameSpan', 'nameImg')" required/>

请改正所有以同样的方式，希望大家理解！

来源

2014-11-02 06:48:45

+0

哇，谢谢你，有时候，你会错过一些简单的事情。无论如何，这只是解决问题的一部分。正如你所看到的那样，在输入字段旁边出现的勾号或x仍然不起作用。 – InfinityCounter 2014-11-02 07:00:37

+0

在你的html中有很多错误来纠正，通过包括更新答案...似乎你需要更多的标准和调试学习。 – 2014-11-02 07:04:26

+0

是的，我刚刚刚刚开始学习网络编程几周前。虽然它与C++非常相似，但它仍然给我一种不同的感觉。但我非常需要帮助。无论如何，我想我至少应该试着让剩下的一个镜头。所以我会给你答案。 – InfinityCounter 2014-11-02 07:10:28

2

有在你的JavaScript文件中的错误。您只需导航至http://www.javascriptlint.com/online_lint.php并粘贴您的代码，然后点击lint。错误在第73行：SyntaxError: invalid assignment left-hand side。任何重大的Javascript错误都会导致您的代码无声无息地失败。

来源

2014-11-02 06:07:06 Ben

+0

非常感谢，我使用该网站，直到我没有更多的错误，在JavaScript中，它仍然没有生效，但我会检查我的网站中的HTML，看看是否改变任何东西 – InfinityCounter 2014-11-02 06:13:19

+0

是的，我跑了CSS和HTML，没有错误，所以我的逻辑检查 – InfinityCounter 2014-11-02 06:14:39

相关问题

 相关问题