<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- Bootstrap -->
<title>Sean Kim</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="custom-menu-wrapper">
<div class="pure-menu custom-menu custom-menu-top">
<a href="#" class="pure-menu-heading custom-menu-brand">Sean Kim</a>
<a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
<div class="me" id="home">
<br><br><br>
<h1 class="name">SEAN KIM</h1>
<hr>
<h6 class="intro">14 year-old programmer/student at Bergen County Academies</h6>
<div class="element"></div>
<img src="images/nyc.jpg" class="img-responsive nyc">
</div>
<div id="about">
<h2 class="about-text">About Me</h2>
<img src="images/golf.png" align="left"class="propic">
<p class="info">My name is Sean Kim and I'm a freshman at
<a href="http://bcts.bergen.org/index.php/bergen-county-academies" class="bca">
Bergen County Academies
</a> in the Academy of Technology and Computer Science (ATCS).
</p>
</div>
<div id="skills">
<h2 class="skills-text">Skills</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-4 html5">
<img src="images/logos/html5.png" alt="HTML 5" width="106" height="150">
<p class="languages">HTML 5</p>
</div>
<div class="pure-u-1 pure-u-md-1-4 css3">
<img src="images/logos/css.png" alt="CSS3" width="106" height="150">
<p class="languages">CSS3</p>
</div>
<div class="pure-u-1 pure-u-md-1-4 python">
<img src="images/logos/python.png" alt="PYTHON" width="150" height="150">
<p class="languages">PYTHON</p>
</div>
</div>
</div>
</div>
<div class="contact-container" id="contact">
<h2 class="contact-text">Contact Me</h2>
<div class="pure-g contact">
<div class="pure-u-1 pure-u-md-1-4 Facebook">
<a href="https://www.facebook.com/seankim327" target="_blank" class="icon">
<i class="fa fa-facebook-square fa-5x"></i>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4 Instagram">
<a href="https://www.instagram.com/seankim.co.kr" target="_blank" class="icon">
<i class="fa fa-instagram fa-5x"></i>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4 Twitter">
<a href="https:/www.twitter.com/sean_d_kim" target="_blank" class="icon">
<i class="fa fa-twitter-square fa-5x"></i>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4 GitHub">
<a href="https://github.com/seankim327" target="_blank" class="icon">
<i class="fa fa-github-square fa-5x"></i>
</a>
</div>
</div>
<script>
function sendMail(email, subject, content) {
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': 'goYVUvLoJH3ICbEMgIA-ow',
'message': {
'from_email': email,
'to': [
{
'email': 'seandyk@gmail.com',
'name': 'Sean Kim',
'type': 'to'
}
],
'autotext': 'true',
'subject': subject,
'html': content
}
}
}).done(function(response) {
if (response[0].status == "rejected") {
document.getElementById("<div id="about"></div>").innerHTML = "Please enter valid fields";
} else {
document.getElementById("<div id="skills"></div>").innerHTML = "Sent!";
}
});
}
</script>
</div>
</body>
</html>
我问我的朋友谁用JavaScript编写了可以发送电子邮件的代码，所以他使用了Mandrill API并给我写了一封。但是他告诉我用“<Empty Div> s替换div”或者我需要输出span。我不知道这意味着什么。有人可以帮忙吗？
答案 0 :(得分：2)
一个空div是一个既有开放也有关闭但没有内容或其他元素作为打开和关闭之间内容的div。
您的朋友在代码中引用的Div是：
<div class="element"></div>
它位于具有文本
的行的正下方14 year-old programmer/student at Bergen County Academies
答案 1 :(得分：0)
他说你的html中需要创建一个div标签。他基本上说“嘿，我的代码会做一些事情，你需要在你的html页面中创建一个div标签，这样我的代码就可以把它放进去了。一旦你创建了这个div标签，转到我给你的代码，将<Empty Div>替换为id所标记的任何内容。
<div id="myDiv"></div>
然后，在您朋友给您的代码中，将<Empty Div>替换为id attribute（myDiv）
答案 2 :(得分：0)
简而言之，在您希望显示状态更新的HTML id中的元素上使用body属性，例如“email-status”。使用document.getElementById('email-status')引用它。
以下是更详细的解释，其中包含更多信息的链接。
div这两个block元素（默认情况下由周围文字的换行符分隔）或span，inline元素，是在Javascript中定期引用和操作的HTML标记。
如果要替换特定元素的内容，通常使用id属性创建选择器。 id值不能包含空格，并且在文档中的所有id值中都应该是唯一的。
例如，只需编写带有div“邮件回复”的HTML id：
<div id="mail-status"></div>
上面的div将放置在您希望显示状态消息的HTML文档body中。
虽然您可以使用class属性作为选择器作为另一个回复建议，但在这种情况下，它并不理想。 class属性不一定是唯一的，因为它最初打算将CSS格式应用于一个或多个元素。一般来说，有时您可能希望使用Javascript选择具有特定类的所有标记。在您的特定情况下，您希望定位一个特定位置，因此id更合适。
要根据div选择id，您可以像使用document.getElementById一样使用id，但它只需要选择您要选择的document.getElementById("mail-response").innerHTML = "Entry is <b>invalid</b>";
值的参数。
done在您的示例中，function(response) {
if (response[0].status == "rejected") {
document.getElementById("<div id="about"></div>").innerHTML = "Please enter valid fields";
} else {
document.getElementById("<div id="skills"></div>").innerHTML = "Sent!";
}
}
函数显示为：
getElementById请注意，这里有两个问题。首先，id simple将value值作为参数而不是HTML代码段。其次，是你在双引号字符串中使用未转义的双引号。
最小修正是将块更改为直接引用现有skills和div function(response) {
if (response[0].status == "rejected") {
document.getElementById("about").innerHTML = "Please enter valid fields";
} else {
document.getElementById("skills").innerHTML = "Sent!";
}
}
。
about但请注意，skills和{{1}}元素目前包含内容。替换innerHTML将删除当前在这些元素中的内容。根据您的其他评论，这听起来不是替换现有的块，而是希望将状态更新插入到为状态更新预留的最初空元素中。
最后，我建议如果您实际上发布了实际的mandrill API密钥，那么您可以立即更改它。