將文本從一個div移動到另一個div，同時還更改其背景顏色，字體和文本顏色

Question

我一直在嘗試借助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> 

Answer 1

這是一個有效的小提琴： JS小提琴鏈接

您的代碼中有很多錯別字。

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">

在淺黃色的顏色選擇，以及有一個錯字：應淺黃色 ，而不是lighyellow

<option value="lighyellow">Light yellow</option>

Answer 2

我已經重組了您的代碼。 這將幫助您獲得預期的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>