我是HTML / CSS / JavaScript的初学者。我正在做一个最终项目,我已经完成了所有工作,包括移动页面。在我的网页中,我创建了一个电子邮件表单,如果用户希望与我联系,可以填写该表单。一旦他们点击了"提交"按钮,客户端电子邮件应用程序(outlook或等效)将打开并填充在网页上输入的信息字段。这在Mozilla Firefox中运行良好,但是当我切换到其他任何东西时,我得到了混合的结果。有时国际米兰探险者会工作,然后突然间它不会。 Chrome会随机工作一次,然后再也不会。有人可以告诉我,我错过了什么?以下是我的代码:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome To MyHomepage</title>
<link rel="shortcut icon" href="../../IMG/clipart.png">
<link rel="stylesheet" href="../../CSS/normalize.css">
<link rel="stylesheet" href="../../CSS/main.css">
<script src="../../js/Javascript.js"></script>
</head>
<body>
<header>
<div id="leftheader">
<img id="leftpic"src="../../IMG/datad.jpg" alt="Data Defense">
</div>
<div id="rightheader">
<img id="righthpic"src="../../IMG/datad.jpg" alt="Data Defense">
</div>
<div id="midhead">
<h2>Welcome to the Home Page of My Name</h2>
<h3 class="shadow">Security Is Everyone's Responsibility!!!</h3>
<h4 class="contact"><a href="../../HTML/contact.html">Contact Me Now!!!</a></h4>
</div>
</header>
<main>
<div class="backcolor">
<ul class="navbar"><!--top-level-menu-->
<li id="firstnav" ><a href="../../index.html">Home</a>
<ul class="dropdown-content"><!--2nd-level-menu-->
<li><a href="../../HTML/JQUERY/mobile.html">JQUERY</a></li>
</ul>
</li>
<li id="secnav"><a href="../../HTML/experience.html">Experience</a>
<ul class="dropdown-content"><!--2nd-level-menu-->
<li><a href="../Experience/CExperience.html">Civilian</a></li>
<li><a href="../Experience/MExperience.html">Military</a></li>
</ul>
</li>
<li id="thirdnav" ><a href="../../HTML/about.html">About Me</a>
<ul class="dropdown-content"><!--2nd-level-menu-->
<li><a href="../../HTML/Aboutme/Travels.html">My Travels</a>
<ul class="dropdown-extension"><!--3rd-level-menu-->
<li><a href="../../HTML/Aboutme/Travels/Travels.html">CONUS</a></li>
<li><a href="../../HTML/Aboutme/Travels/TravelsOCO.html">OCONUS</a></li>
</ul>
</li>
<li><a href="../../HTML/Aboutme/Education.html">Education</a></li>
<li><a href="../../HTML/Aboutme/Hobbies.html">Hobbies</a></li>
<li><a href="../../HTML/Aboutme/Special.html">Sepcial Projects<a/></li>
<li><a href="../../HTML/Aboutme/Soceities.html">Soceities</a></li>
</ul>
</li>
<li id="fourthnav"><a href="../../HTML/volunteer.html">Volunteer Work</a></li>
<li id="fifthnav"><a href="../../HTML/skills.html">Skills</a></li>
<li id="sixthnav"><a href="../../HTML/goals.html">Goals</a>
<ul class="dropdown-content"><!--2nd-level-menu-->
<li><a href="../../HTML/Goals/GoalsST.html">Short Term</li>
<li><a href="../../HTML/Goals/GoalsLT.html">Long Term</li>
</ul>
</li>
<li id="lastnav" class="active"><a href="../../HTML/contact.html">Contact Me</a>
<ul id="lastnav"class="dropdown-content"><!--2nd-level-menu-->
<li><a href="../../HTML/Contact/phone.html">Phone</a></li>
<li><a href="../../HTML/Contact/email.html" class="sub-active">Email</a>
<ul class="dropdown-extension1"><!--3rd-level-menu-->
<li><a href="../../HTML/Contact/webemail.html">Web Email<a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="mainsec">
<div id="leftsec">
this is a test
</div>
<div id="rightsec">
this is a test
</div>
<div id="midsec">
<div class="contact-section1">
<h3 id="quest1">
How to Contact me?
</h3>
<h4 id="answer1" class="shadow1">
You can contact me by filling out the information below.
Please give me 24-72 hours to reply back.
</h4>
<h4>Please note, clicking "Submit" will open the email application
on your device!</h4>
</div>
<div id="body">
<div id="section">
<form id="email_form" name="email_form" action= "sent/sent.html" method="get">
<label for="email_address1"id="label">Email Address:</label>
<input type="text" id="email_address1" name="email_address1"</label>
<span id="email_address1_error">*</span><br><br>
<label for="emal_address2"id="label">Re=Enter Email Address:</label>
<input type="text" id="email_address2" name="emaill_address2">
<span id="email_address2_error">*</span><br><br>
<label for="name"id="label">Your Name:</label>
<input type="text" id="name" name="name">
<span id="name_error">*</span><br><br>
<label for="subject"id="label">Subject:</label>
<input type="text" id="subject" name="subject">
<span id="subject_error">*</span><br><br>
<label for="message" id="label">Message:</label>
<textarea type="text" id="message" tabindex="3"></textarea>
<span id="message_error">*</span><br><br>
<label id="label"> </label>
<input type="button" id="join_list" value="Submit">
</form>
</div>
</div>
<h4 class="disclaimer" id="shadowtext">If you do not wish to use your email application, please <a href="../../HTML/Contact/webemail.html" id="shadowtext">click here</a>
to go to the web page email application.</h4>
</div>
<div class="contactemail-section2">
</div>
</div>
</div>
</div>
</main>
</body>
<footer>
<p>© 2016, My Name All Rights Reserved.</p>
</footer>
</html>
JavaScript的:
var $=function(id){
return document.getElementById(id);
}
var joinList=function (){
var emailAddress1=$("email_address1").value;
var emailAddress2=$("email_address2").value;
var Name=$("name").value;
var Subject=$("subject").value;
var Message=$("message").value;
var isValid=true;
var Toemail="I have removed the email address for this post";
var CCemail="I have removed the email address for this post"";
Message=Message+"%0D%0A"+"%0D%0A"+"%0D%0A"+"From,"+" %0D%0A"+ Name + "%0D%0A"+emailAddress1;
if(emailAddress1=="")
{
$("email_address1_error").firstChild.nodeValue="This feild is required.";
isValid=false;
}
else
{
$("email_address1_error").firstChild.nodeValue="";
}
if(emailAddress2=="")
{
$(email_address2_error).firstChild.nodeValue="This feild is required.";
isValid=false;
}
else if (emailAddress1!==emailAddress2)
{
$(email_address2_error).firstChild.nodeValue="The email addresses must match";
isValid=false;
}
else
{
$("email_address2_error").firstChild.nodeValue="";
}
if(Name=="")
{
$("name_error").firstChild.nodeValue="This feild is required.";
isValid=false;
}
else
{
$("name_error").firstChild.nodeValue="";
}
if(Subject=="")
{
$("subject_error").firstChild.nodeValue="This feild is Required";
isValid=false;
}
else
{
$("subject_error").firstChild.nodeValue="";
}
if(Message=="")
{
$("message_error").firstChild.nodeValue="This feild is requried";
isValid=false;
}
else
{
$("message_error").firstChild.nodeValue="";
}
if (isValid)
{
var mailto_link = 'mailto:' + Toemail + '?cc=' + CCemail + '&subject=' + Subject + '&body=' + Message;
window.open('sent.html',"_self");
win = window.open(mailto_link, 'sent.html');
if (win && win.open && !win.closed)
{
win.close();
}
}
}
window.onload=function()
{
$("join_list").onclick=joinList;
$("email_address1").focus();
}
我没有添加我的CSS文件,因为我认为不需要它,除了我有很多规则在那里它将无法破译。如果你真的需要它,那么我会发布它。