我的代码的目标是使用HTML、CSS和JavaScript创建一个简历构建器。一旦用户“点击”创建简历，一个新的窗口应该打开，内容输入以我选择的简历格式样式。我不能使用HTML来样式化简历。
我遇到的问题是我的样式不会填充到用JavaScript创建的动态样式中。（我正在测试我的代码是否正确）。我没有收到任何错误，但是，没有任何变化。我不确定是否因为我只做了名字，我需要格式化其他内容，或者我是否真的编写错了代码。
我已经为用户创建了输入信息的HTML和填充信息的JavaScript。没有错误！
我添加了一个函数来中心对齐firstName。没有错误！但是，什么也没有发生！？
HTML格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB-115 Final Project</title>
<style>
body {
background-color: peru;
}
h1 {
text-align: center;
padding: 60px;
background: forestgreen;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Build Your Resume</h1>
<form>
<div id="myinfo">
<h2>Personal Information:</h2>
<label>Enter your first name:</label><br>
<input type="text" id="firstName"><br><br>
<label>Enter your last name:</label><br>
<input type="text" id="lastName"><br><br>
<label>Enter your preferred name:</label><br>
<input type="text" id="preName"><br><br>
<label>Enter your email address:</label><br>
<input type="text" id="email"><br><br>
<label>Enter your phone number:</label><br>
<input type="text" id="number"><br><br>
<label>Enter your state:</label><br>
<input type="text" id="state"><br><br>
<label>Enter your city:</label><br>
<input type="text" id="city"><br><br>
<label>Enter your zipcode:</label><br>
<input type="text" id="zip"><br><br>
<p>About Me</p>
<textarea rows="15" cols="33" id="aboutMe">Tell us about the position you are looking for!</textarea><br><br>
</div>
<div id="myEdu">
<h2>Enter Educational History:</h2>
<label>Start Date:</label>
<input type="date" id="eduStart"><br><br>
<label>End Date:</label>
<input type="date" id="eduEnd"><br><br>
<label>Name of school:</label><br>
<input type="text" id="school"><br><br>
<label>Degree type:</label><br>
<input type="text" id="degree"><br><br>
<label>Field of study:</label><br>
<input type="text" id="major"><br><br>
</div>
<div id="myJob">
<h2>Enter job information:</h2>
<label>Start Date:</label>
<input type="date" id="jobStart"><br><br>
<label>End Date:</label>
<input type="date" id="jobEnd"><br><br>
<p>Position Details:</p>
<textarea rows="5" cols="33" id="details">Click Here!</textarea><br><br>
</div>
<div id="extra">
<h2>Please Enter Your Skills:</h2>
<textarea rows="15" cols="33" id="skills">Click Here!</textarea><br><br>
<h2>Links:</h2>
<p>Please provide links to any websites or blogs.</p>
<textarea rows="15" cols="33" id="links">Click Here!</textarea><br><br>
</div>
<input type="button" id="btnSubmit" value="Create Resume">
</form>
<script src="projectJS.js"></script>
</body>
</html>JavaScript程式码：
/*style*/
function myFunction () {
let fName = document.getElementById("firstName");
fName.style.textAlign = "center";
}
/*button*/
document.getElementById("btnSubmit").addEventListener('click',myWindow)
/*function to create resume*/
function myWindow()
{
/*get HTML first name*/
fName = document.getElementById("firstName").value;
/*get HTML last name*/
lName = document.getElementById("lastName").value;
/*get HTML preferred name*/
pName = document.getElementById("preName").value;
/*get HTML email address*/
eAddress = document.getElementById("email").value;
/*get HTML phone number*/
phoneNum = document.getElementById("number").value;
/*get HTML state*/
stateAdd = document.getElementById("state").value;
/*get HTML city*/
cityAdd = document.getElementById("city").value;
/*get HTML zip code*/
zipCode = document.getElementById("zip").value;
/*get HTML about me*/
about = document.getElementById("aboutMe").value;
/*get HTML Edu start date*/
schoolStart = document.getElementById("eduStart").value;
/*get HTML Edu end date*/
schoolEnd = document.getElementById("eduEnd").value;
/*get HTML School*/
schoolName = document.getElementById("school").value;
/*get HTML degree type*/
degreeType = document.getElementById("degree").value;
/*get HTML major*/
fieldStudy = document.getElementById("major").value;
/*get HTML job start date*/
jStart = document.getElementById("jobStart").value;
/*get HTML job end date*/
jEnd = document.getElementById("jobEnd").value;
/*get HTML job details*/
jobDetails = document.getElementById("details").value;
/*get HTML skills*/
mySkills = document.getElementById("skills").value;
/*get HTML links*/
webPage = document.getElementById("links").value;
myText = ("<html>\n<head>\n<title>WEB-115 Final Project</title>\n</head>\n<body>");
myText += (fName);
myText += (lName);
myText += (pName);
myText += (eAddress);
myText += (phoneNum);
myText += (stateAdd);
myText += (cityAdd);
myText += (zipCode);
myText += (about);
myText += (schoolStart);
myText += (schoolEnd);
myText += (schoolName);
myText += (degreeType);
myText += (fieldStudy);
myText += (jStart);
myText += (jEnd);
myText += (jobDetails);
myText += (mySkills);
myText += (webPage);
myText += ("</body>\n</html>");
flyWindow = window.open('about:blank','myPop','width=400,height=200,left=200,top=200');
flyWindow.document.write(myText);
}
1条答案
按热度按时间d4so4syb1#
首先，您可以检查样式是否适用于文件或内联样式：
然后，如果您想使用函数来完成这项工作，您可以像我这样通过设置一个全局flyWindow变量来控制它：
成功的人都是有耐心的人，相信吧！