我一直试图在jquery的帮助下将输入文本从第一页移动到第二页，同时还尝试确保在第一页中选择的更改仅显示在第二页之后打印按钮已被按下，但我还没有开始工作，我想知道我做错了什么。
document.getElementById("page2").style.display = 'none'; // Hide div with name 'page2'
document.getElementById("reset").addEventListener("click", function() {
// body...
});
document.getElementById("byt1").addEventListener("click", function() {
document.getElementById("page1").style.display = 'none'; // Hide div with name 'page1'
document.getElementById("page2").style.display = 'block'; // Show div with name 'page2'
function changecolor(color) {
var color = document.getElementById("select_bgcolor").value;
document.getElementById.style.backgroundColor = select_bgcolor.value;
}
// Move text from input field in page 1 to presenting area in page 2
document.getElementById("area1").innerHTML = document.getElementById("txt1").value;
document.getElementById("area3").innerHTML = document.getElementById("txt2").value;
document.getElementById("area2").innerHTML = document.getElementById("txt3").value;
document.getElementById("area4").innerHTML = document.getElementById("txt4").value;
document.getElementById("area5").innerHTML = document.getElementById("txt5").value;
document.getElementById("area6").innerHTML = document.getElementById("txt6").value;
});
document.getElementById("byt2").addEventListener("click", function() {
document.getElementById("page1").style.display = 'block';
document.getElementById("page2").style.display = 'none';
});<div id="page1">
<h2>Order your business card here:</h2>
<p>
Company... <input type="text" id="txt1" />
</p>
<p>
Last name... <input type="text" id="txt2" />
</p>
<p>
First name... <input type="text" id="txt3" />
</p>
<p>
Titel... <input type="text" id="txt4" />
</p>
<p>
Telefon... <input type="text" id="txt5" />
</p>
<p>
E-mail... <input type="text" id="txt6" />
</p>
<form>
Background color <select id="select_bgcolor" onchange="byt1">
<option value="lightblue">Light blue</option>
<option value="lighyellow">Light yellow</option>
<option value="white">White</option>
<option value="turquoise">Turquoise</option>
</select>
</form>
</p>
<p>
<form>
Text color <select id="select_txtcolor" onchange="byt1">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="darkgreen">Dark green</option>
</select>
</form>
</p>
<p>
<form>
font <select id="select_txtfont" onchange="byt1">
<option value="verdana">Verdana</option>
<option value="Arial">Arial</option>
<option value="tahoma">Tahoma</option>
<option value="impact">Impact</option>
</select>
</form>
</p>
<p>
<input type="button" id="reset" value="Reset" />
<input type="button" id="byt1" value="Print" />
</p>
</div>
<div id="page2">
<h2>Page 2</h2>
<p id="area"></p>
<input type="button" id="byt2" value="Back to page 1" />
</div>
答案 0 :(得分：2)
这是一个工作小提琴：JS Fiddle Link
代码中有很多拼写错误。
document.getElementById("txt").value
应该是：
document.getElementById("txt1").value.
另外，我不明白为什么以下方法已经放置在内部打印按钮单击处理程序并且从未在其中调用过：
function changecolor(color)
{
var color = document.getElementById("select_bgcolor").value;
document.getElementById.style.backgroundColor = select_bgcolor.value;
}
我删除了该方法并将其替换为以下内容：
document.getElementById("area").style.backgroundColor = document.getElementById("select_bgcolor").value;
同样，为什么会在选择框中分配onchange事件？
<select id="select_txtcolor" onchange="byt1">
Lightyellow颜色选项也有拼写错误： 它应该是 lightyellow 而不是lighyellow
<option value="lighyellow">Light yellow</option>
答案 1 :(得分：1)
我重构了你的代码。这将有助于您获得预期的OP。
var reset = document.getElementById("reset");
var print = document.getElementById("byt1");
var back = document.getElementById("byt2");
var color = document.getElementById("select_bgcolor").value;
var font = document.getElementById("select_txtcolor").value;
var tcolor = document.getElementById("select_txtfont").value;
var cssvalue = [];
reset.addEventListener("click", function(){
document.getElementById("form").reset();
});
print.addEventListener("click", function(){
var printtext = document.querySelector("#printarea");
cssvalue.push(color,font,tcolor);
document.getElementById("page2").appendChild(printtext);
document.getElementById("page2").style.display = "block";
document.getElementById("page1").style.display = "none";
document.getElementById("page2").style.backgroundColor = cssvalue[0];
document.getElementById("page2").style.color = cssvalue[1];
document.getElementById("page2").style.fontFamily = cssvalue[2];
});
back.addEventListener("click", function(){
var printtext = document.querySelector("#printarea");
document.getElementById("page1").prepend(printtext);
document.getElementById("page1").style.display = "block";
document.getElementById("page2").style.display = "none";
});#page2{
display:none;
}<div id="page1">
<form id="form" name="style">
<div id="printarea">
<h2>Order your business card here:</h2>
<p>
Company... <input type="text" id="txt1" />
</p>
<p>
Last name... <input type="text" id="txt2" />
</p>
<p>
First name... <input type="text" id="txt3" />
</p>
<p>
Titel... <input type="text" id="txt4" />
</p>
<p>
Telefon... <input type="text" id="txt5" />
</p>
<p>
E-mail... <input type="text" id="txt6" />
</p>
</div>
Background color <select id="select_bgcolor" onchange="byt1">
<option value="lightblue">Light blue</option>
<option value="lighyellow">Light yellow</option>
<option value="white">White</option>
<option value="turquoise">Turquoise</option>
</select>
Text color <select id="select_txtcolor" onchange="byt1">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="darkgreen">Dark green</option>
</select>
font <select id="select_txtfont" onchange="byt1">
<option value="verdana">Verdana</option>
<option value="Arial">Arial</option>
<option value="tahoma">Tahoma</option>
<option value="impact">Impact</option>
</select>
</form>
<div style="margin-top:15px;">
<input type="button" id="reset" value="Reset" />
<input type="button" id="byt1" value="Print" />
</div>
</div>
<div id="page2">
<h2>Page 2</h2>
<p id="area"></p>
<input type="button" id="byt2" value="Back to page 1" />
</div>