我的代码的目标是使用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);
}
首先，你可以用文件或内联样式检查样式是否有效:
// If you use css file style
// myText = (`<html>n<head>n<title>WEB-115 Final Project</title><link rel="stylesheet" type="text/css" href="styles1.css">n</head>n<body>`);
// Else if you use inline style
let style = `body {
color: blue;
}
.text-center {
text-align: center;
}
`;
myText = (`<html>n<head>n<title>WEB-115 Final Project</title><style>${style}</style>n</head>n<body>`);
myText += `<div class="text-center">${fName}</div>`;
然后，如果你想使用一个函数来完成这项工作，你可以通过设置一个全局flyWindow变量来控制它，就像我这样:
<!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> -->
<script>
/*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;
// If you directly use a css file style
// myText = (`<html>n<head>n<title>WEB-115 Final Project</title><link rel="stylesheet" type="text/css" href="styles1.css">n</head>n<body>`);
// Else if you use inline style
// let style = `body {
// color: blue;
// }
// .text-center {
// text-align: center;
// }
// `;
// myText = (`<html>n<head>n<title>WEB-115 Final Project</title><style>${style}</style>n</head>n<body>`);
// myText += `<div class="text-center">${fName}</div>`;
// Else if you want to set it by a function
myText = (`<html>n<head>n<title>WEB-115 Final Project</title>n</head>n<body>`);
myText += `<div id="firstName">${fName}</div>`;
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);
myFunctionToSetCenterFirstName();
}
// Create global variable flyWindow to set style by a javascript function
var flyWindow;
// Then set style by this function
function myFunctionToSetCenterFirstName() {
let fName = flyWindow.document.getElementById("firstName");
fName.style.textAlign = "center";
}
</script>
</body>
</html>