-1
我有一個測驗，其中添加了一個數值，用於確定顯示的圖像，但是當我單擊提交時僅顯示我的原始.js文件。我主持了它，我不確定爲什麼它向我展示了這一點。文件中的前一個函數工作，因爲驗證有效並在該文件中找到。託管時提交顯示代碼
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/random.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1><a href="https://playoverwatch.com">Overwatch</a></h1>
</div>
<div id="content">
<h2 align="center">Overwatch Quiz</h2>
<p>
Hi there! This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="js/random.js" method="post" name="quiz_form" onsubmit="owchar()">
<p>
<br>
<input id='fName' name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" class="validate" />
<img width="45px" height="45px"src='img/Q.png' id="fNameImg" />
</p>
<p>
<br>
<input id="last_name" name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" class="validate"/>
<img width="45px" height="45px" src='img/Q.png' id="last_nameImg" />
</p>
<p>
<br>
<input id="email" name="email" type="email" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain @ '" class="validate" />
<img width="45px" height="45px" src='img/Q.png' id="emailImg" />
</p>
<p>
<br>
<input id='phone' name="number" type="tel" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" class="validate" />
<img width="45px" height="45px" src='img/Q.png' id="phoneImg" />
</p>
<p>
<br>
<input id='sulley' name="sulley" type="sulley" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" class="validate"/>
<img width="45px" height="45px" src='img/Q.png' id="sulleyImg" />
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).
<br>
<input type="radio" name="exist" value="2">Female(Human).
<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.
<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.
<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?
<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.
<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.
<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.
<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.
<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<h2 align="center" >Congratulations you got...</h2>
<div id="character" align="center" height="499" width="281" >
<img src="" id="character"/>
<br>
<br>
<br>
</div>
<div id="footer">
<h2 align="center">Created by Kenneth Dunn </h2>
</p>
</div>
</div>
</div>
<script src="js/random.js" type="text/javascript"></script>
</body>
</html>
JS
function validateData() {
console.log(this);
var letters = /^[A-Za-z]+$/;
var email = [@];
var tel = /^\d{3}-\d{3}-\d{4}$/gm;
var sulley = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
var imgId = this.id + 'Img';
var img = document.getElementById(imgId);
console.log(img)
var valid = false;
if (this.type == 'text') {
if (this.value.match(letters)) {
valid = true;
}
}
if (this.type == 'email') {
if (this.value.match(email)) {
valid = true;
}
}
if (this.type == 'tel') {
if (this.value.match(tel)) {
valid = true;
}
}
if (this.type == 'sulley') {
if (this.value.match(sulley)) {
valid = true;
}
}
if (valid) {
img.src = "img/check.png";
} else {
img.src = "img/redx.png";
}
}
var els = document.getElementsByClassName("validate");
for(i=0 ; i<els.length ; i++){
els[i].addEventListener("change", validateData, false);
}
function owchar(){
var sum = 0;
var w = document.forms["quiz_form"]["exist"].value;
sum+=w;
var q = document.forms["quiz_form"]["weapon"].value;
sum+=q;
var r = document.forms["quiz_form"]["idea"].value;
sum+=r;
var g = document.forms["quiz_form"]["look"].value;
sum+=g;
if (sum>1 && sum<6){
document.getElementById("character").src="img/reaper.png";
return false;
}
else if (sum>6 && sum<9){
document.getElementById("character").src="img/tracer.jpeg";
return false;
}
else {
document.getElementById("character").src="img/winston.png";
return false;
}
}
快速說明我有一個文件夾，名爲文件夾中的HTML文件存儲，然後3個子文件夾名爲CSS，IMG，和js，其中css，img和js分別存儲。 – Phlash6
你爲什麼要發佈到JS文件？ – epascarello
第一部分是表單驗證，第二部分是與答案相關的值將給我我的總和，我用它來確定哪個img改變img id（「字符」）。 – Phlash6