如何将文本添加到 Javascript 中的弹出窗口 window?
How to add text to a pop up window in Javascript?
我正在创建一个简历生成器,一个人可以在其中输入信息到输入字段,我的 javascript 代码将获取字段值并将其写入弹出窗口 window,这将是他们的恢复。我显然在这里做了一些严重错误的事情。我可以打开弹出窗口 window,但弹出窗口 window 中没有我从 javascript 附加的文本。
我将展示代码片段,因此我不会发布完整的文档,但一切都遵循相同的规则。
我输入的代码html:
<body>
<!-- Full name -->
<p><strong>Enter your full name:</strong></p>
<input type="text" name="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" name="address">
.
.
.
</body>
Html 对于我的弹出 window:
<body>
<div id="name"></div>
<div id="address/phone"></div>
<hr>
<div class="theLeft" id="objectives_pop"></div>
<div class="theRight" id="objectivesText"></div>
.
.
.
</body>
Javascript:
function myWindow() {
window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
// Name
var name = document.getElementById('fullName').value;
document.getElementById('name').innerHTML = name;
// Address and phone number
var address = document.getElementById('address').value;
var phoneNum = document.getElementById('phoneNum').value;
document.getElementById('address/phone').innerHTML = address + '/' + phoneNum;
.
.
.
我想将主 html 文件 (project.html) 中输入字段的文本附加到 popupWindow.html 中的弹出窗口 window。我该怎么做?
您可以在弹出对话框中添加类似 <div id="dialog" title="Basic dialog" style="display: none;">Insert text</div>
的内容!
在您当前的代码片段中,您调用的是主页上的 document.getElementById
,而不是弹出窗口。您首先需要将弹出窗口 window 作为变量获取,然后根据需要对其进行修改。
要开始,请尝试执行以下操作:
let myPopup = window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
myPopup.onload = function() {
var name = document.getElementById('fullName').value;
myPopup.document.getElementById('name').innerHTML = name
}
这将打开一个新的弹出窗口 window,等待它加载,然后更改该弹出窗口的名称 innerHTML,而不是父页面。
您正在使用 document.getElementById() 但在您的 html 上输入实际上没有 ID,它们有名称,您的 html 应该是:
<p><strong>Enter your full name:</strong></p>
<input type="text" id="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" id="address">
我正在创建一个简历生成器,一个人可以在其中输入信息到输入字段,我的 javascript 代码将获取字段值并将其写入弹出窗口 window,这将是他们的恢复。我显然在这里做了一些严重错误的事情。我可以打开弹出窗口 window,但弹出窗口 window 中没有我从 javascript 附加的文本。
我将展示代码片段,因此我不会发布完整的文档,但一切都遵循相同的规则。
我输入的代码html:
<body>
<!-- Full name -->
<p><strong>Enter your full name:</strong></p>
<input type="text" name="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" name="address">
.
.
.
</body>
Html 对于我的弹出 window:
<body>
<div id="name"></div>
<div id="address/phone"></div>
<hr>
<div class="theLeft" id="objectives_pop"></div>
<div class="theRight" id="objectivesText"></div>
.
.
.
</body>
Javascript:
function myWindow() {
window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
// Name
var name = document.getElementById('fullName').value;
document.getElementById('name').innerHTML = name;
// Address and phone number
var address = document.getElementById('address').value;
var phoneNum = document.getElementById('phoneNum').value;
document.getElementById('address/phone').innerHTML = address + '/' + phoneNum;
.
.
.
我想将主 html 文件 (project.html) 中输入字段的文本附加到 popupWindow.html 中的弹出窗口 window。我该怎么做?
您可以在弹出对话框中添加类似 <div id="dialog" title="Basic dialog" style="display: none;">Insert text</div>
的内容!
在您当前的代码片段中,您调用的是主页上的 document.getElementById
,而不是弹出窗口。您首先需要将弹出窗口 window 作为变量获取,然后根据需要对其进行修改。
要开始,请尝试执行以下操作:
let myPopup = window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
myPopup.onload = function() {
var name = document.getElementById('fullName').value;
myPopup.document.getElementById('name').innerHTML = name
}
这将打开一个新的弹出窗口 window,等待它加载,然后更改该弹出窗口的名称 innerHTML,而不是父页面。
您正在使用 document.getElementById() 但在您的 html 上输入实际上没有 ID,它们有名称,您的 html 应该是:
<p><strong>Enter your full name:</strong></p>
<input type="text" id="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" id="address">