将 CSS 添加到 JavaScript 中创建的 window.open
[英]Adding CSS to a window.open created in JavaScript
问题描述
我的代码的目标是使用 HTML、CSS 和 JavaScript 创建一个简历生成器。一旦用户“单击”创建简历，一个新的 window 应该打开，内容输入以我选择的简历格式设置样式。 我不能使用 HTML 来设计简历。
我遇到的问题是我的样式不会填充到使用 JavaScript 即时创建的文件中。此时，我只尝试将名字居中（我正在测试我的代码是否正确）。 我没有收到任何错误，但是，没有任何变化。 我不确定是不是因为我只做名字而我需要格式化其他内容，或者我是否真的编码错误。
我创建了 HTML 供用户输入他们的信息，并创建了 JavaScript 来填充信息。 没有错误！
我添加了一个 function 以居中对齐 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 个解决方案
解决方案1
0 2022-12-02 01:58:10
首先，您可以使用文件或内联样式检查样式是否有效：
// 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>`;
然后，如果你想使用 function 来完成这项工作，你可以像我这样设置一个全局 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>
成功的人都是有耐心的人，相信吧！
使用window.open（）JavaScript将文本添加到另一个窗口
[英]Adding text to another window using window.open() JavaScript
在新window.open（）中添加并运行外部javascript文件
[英]Adding and running external javascript file in new window.open()
将网站图标添加到 javascript Bookmarklet（使用 window.open）
[英]Adding favicon to javascript Bookmarklet (uses window.open)
如何在 JavaScript 中使用 window.open 更改 css href？
[英]How to change css href using window.open in JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
javascript window.open和添加参数
javascript：window.open
在JavaScript中打开window.open？
用Javascript打开WIndow.open
javascript-window.open
使用window.open（）JavaScript将文本添加到另一个窗口
在新window.open（）中添加并运行外部javascript文件
将网站图标添加到 javascript Bookmarklet（使用 window.open）
如何在 JavaScript 中使用 window.open 更改 css href？
Javascript与window.open链接
相关标签