javascript - 将文本从一个 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

这是一个工作 fiddle :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">

浅黄色选项也有错字:它应该是浅黄色而不是浅黄色

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