所以我有一个外部 javascript 文件。它链接到我的html代码，但是我的代码都没有生效，而且我似乎无法找到问题所在。 这是外部 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 函数，也是通过 onfocus 事件触发器触发的。
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="example@emailprovider.com" 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
<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="example@emailprovider" 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? </label>
<input type="radio" name="question" id="question" value="2" />
<label for="q" class="radioLabels">Did you skip your last class? </label>
<input type="radio" name="question" id="question" value="3" />
<label for="q" class="radioLabels">Can you drive a car? </label>
<br/>
<br/>
<input type="radio" name="question" id="question" value="4" />
<label for="q" class="radioLabels">Do watch anime? </label>
<input type="radio" name="question" id="question" value="5" />
<label for="q" class="radioLabels">Did you vote for Portia? </label>
<input type="radio" name="question" id="question" value="6" />
<label for="q" class="radioLabels">Did you enter your real name and age? </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">© Emile Keith - 1400282</p>
</footer>
</body>
</html>最佳答案
您的 Javascript 文件中有错误。您所需要做的就是导航至http://www.javascriptlint.com/online_lint.php并粘贴您的代码，然后点击 lint。错误位于第 73 行:SyntaxError:左侧赋值无效。任何重大的 Javascript 错误都会导致您的代码无提示地失败。
关于javascript - 外部 Javascript 文件无法正常工作，需要帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26696408/