将元素附加到页面隐藏输入字段答案

【问题标题】：appending element to the page hides input field将元素附加到页面隐藏输入字段
【发布时间】：2016-05-23 00:03:27
【问题描述】：

我正在学习 JavaScript，并且我已经获得了我的程序的工作代码。我面临的唯一问题是，当调用 findBooking 方法并在页面上显示结果表时，它会隐藏搜索字段。知道如何解决它？

var find = document.getElementById('find');
var inputBox = document.getElementById('inputBox');


function CustomerBooking ( custId, custName, film, showDate ) {
  
  this.custId = custId;
  this.custName = custName;
  this.film = film;
  this.showDate = showDate;
}

CustomerBooking.prototype.getCustId = function (){
  return this.custId;
};

CustomerBooking.prototype.setCustId = function (custId) {
  this.custId = custId;
};

CustomerBooking.prototype.getCustName = function (){
  return this.custName;
};

CustomerBooking.prototype.setCustName = function (custName) {
  this.custName = custName;
};

CustomerBooking.prototype.getFilm = function (){
  return this.film;
};

CustomerBooking.prototype.setFilm = function (film) {
  this.film = film;
};

CustomerBooking.prototype.getShowDate = function (){
  return this.showDate;
};

CustomerBooking.prototype.setShowDate = function (showDate) {
  this.showDate = showDate;
};

function Cinema () {
  this.bookings = [];
}

Cinema.prototype.addBooking = function(custId, custName, film, showDate){
  this.bookings[custId] = new CustomerBooking(custId, custName, film, showDate);
};

Cinema.prototype.findBooking = function () {
  var findID = parseInt(inputBox.value);
    var bookingSummary = "<table  border='1'>";
    for ( var booking in this.bookings ) {
         if ( findID === this.bookings[booking].custId ) {
             bookingSummary += "<tr><td>";
             bookingSummary += this.bookings[booking].getCustId();
             bookingSummary += "</td>";
           
             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getCustName();
             bookingSummary += "</td>";
           
             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getFilm();
             bookingSummary += "</td>";
           
             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getShowDate();
             bookingSummary += "</td>";
             bookingSummary += "</tr>";
         }
    }
             bookingSummary += "</table>";
             document.write(bookingSummary);
};

Cinema.prototype.getBookings = function() {
  var booking;
  var bookingsTable = "<table border='1'>";
  for ( booking in this.bookings ){
       bookingsTable += "<tr><td>";
       bookingsTable += this.bookings[booking].getCustId();
       bookingsTable += "</td>";
    
       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getCustName();
       bookingsTable += "</td>";
    
       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getFilm();
       bookingsTable += "</td>";
    
       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getShowDate();
       bookingsTable += "</td>";
       
       bookingsTable += "</tr>";
    
  }
  
       bookingsTable += "</table>";
  
      return bookingsTable;
};



var odeon = new Cinema();

odeon.addBooking(140, "Arnold Clark", "Step Up", "22 May 2016 19:45");
odeon.addBooking(193, "Janine Booth", "Lover", "31 May 2016 17:30");
odeon.addBooking(440, "Angela Picker", "Spice N Honey", "09 June 2016 15:00");
odeon.addBooking(390, "Cathrine Macintosh", "Avengers", "13 June 2016 20:30");
odeon.addBooking(420, "Smantha Jones", "Hangover 2", "20 May 2016 16:30");

//document.write(odeon.getBookings());

find.onclick = function () {
  odeon.findBooking();
};

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <input type="text" id="inputBox">
  <input type="submit" value="Find Booking" id="find">
  <br>
  
</html>

【问题讨论】：

标签： javascript html css arrays object

【解决方案1】：

document.write 在您的代码中覆盖所有内容，您需要为结果创建一个元素，并在单击查找按钮时更新结果元素。考虑下面的例子：

var find = document.getElementById('find');
var inputBox = document.getElementById('inputBox');


function CustomerBooking ( custId, custName, film, showDate ) {
  
  this.custId = custId;
  this.custName = custName;
  this.film = film;
  this.showDate = showDate;
}

CustomerBooking.prototype.getCustId = function (){
  return this.custId;
};

CustomerBooking.prototype.setCustId = function (custId) {
  this.custId = custId;
};

CustomerBooking.prototype.getCustName = function (){
  return this.custName;
};

CustomerBooking.prototype.setCustName = function (custName) {
  this.custName = custName;
};

CustomerBooking.prototype.getFilm = function (){
  return this.film;
};

CustomerBooking.prototype.setFilm = function (film) {
  this.film = film;
};

CustomerBooking.prototype.getShowDate = function (){
  return this.showDate;
};

CustomerBooking.prototype.setShowDate = function (showDate) {
  this.showDate = showDate;
};

function Cinema () {
  this.bookings = [];
}

Cinema.prototype.addBooking = function(custId, custName, film, showDate){
  this.bookings[custId] = new CustomerBooking(custId, custName, film, showDate);
};

Cinema.prototype.findBooking = function () {
  var findID = parseInt(inputBox.value);
    var bookingSummary = "<table  border='1'>";
    for ( var booking in this.bookings ) {
         if ( findID === this.bookings[booking].custId ) {
             bookingSummary += "<tr><td>";
             bookingSummary += this.bookings[booking].getCustId();
             bookingSummary += "</td>";
           
             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getCustName();
             bookingSummary += "</td>";
           
             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getFilm();
             bookingSummary += "</td>";
           
             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getShowDate();
             bookingSummary += "</td>";
             bookingSummary += "</tr>";
         }
    }
             bookingSummary += "</table>";
             document.getElementById('results').innerHTML = bookingSummary;
};

Cinema.prototype.getBookings = function() {
  var booking;
  var bookingsTable = "<table border='1'>";
  for ( booking in this.bookings ){
       bookingsTable += "<tr><td>";
       bookingsTable += this.bookings[booking].getCustId();
       bookingsTable += "</td>";
    
       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getCustName();
       bookingsTable += "</td>";
    
       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getFilm();
       bookingsTable += "</td>";
    
       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getShowDate();
       bookingsTable += "</td>";
       
       bookingsTable += "</tr>";
    
  }
  
       bookingsTable += "</table>";
  
      return bookingsTable;
};



var odeon = new Cinema();

odeon.addBooking(140, "Arnold Clark", "Step Up", "22 May 2016 19:45");
odeon.addBooking(193, "Janine Booth", "Lover", "31 May 2016 17:30");
odeon.addBooking(440, "Angela Picker", "Spice N Honey", "09 June 2016 15:00");
odeon.addBooking(390, "Cathrine Macintosh", "Avengers", "13 June 2016 20:30");
odeon.addBooking(420, "Smantha Jones", "Hangover 2", "20 May 2016 16:30");

//document.write(odeon.getBookings());

find.onclick = function () {
  odeon.findBooking();
};

  <input type="text" id="inputBox">
  <input type="submit" value="Find Booking" id="find">
  <br>
  <div id="results"></div>

【讨论】：

【解决方案2】：

您的方法的问题是您正在使用document.write() 函数来编写函数的结果。在页面内容完全加载后使用document.write() 会删除页面上存在的所有现有html，并将在页面上写入document.write() 函数中提供的内容。 W3School Referece

尝试为结果使用新元素而不是文档本身。

var find = document.getElementById('find');
var inputBox = document.getElementById('inputBox');


function CustomerBooking ( custId, custName, film, showDate ) {

  this.custId = custId;
  this.custName = custName;
  this.film = film;
  this.showDate = showDate;
}

CustomerBooking.prototype.getCustId = function (){
  return this.custId;
};

CustomerBooking.prototype.setCustId = function (custId) {
  this.custId = custId;
};

CustomerBooking.prototype.getCustName = function (){
  return this.custName;
};

CustomerBooking.prototype.setCustName = function (custName) {
  this.custName = custName;
};

CustomerBooking.prototype.getFilm = function (){
  return this.film;
};

CustomerBooking.prototype.setFilm = function (film) {
  this.film = film;
};

CustomerBooking.prototype.getShowDate = function (){
  return this.showDate;
};

CustomerBooking.prototype.setShowDate = function (showDate) {
  this.showDate = showDate;
};

function Cinema () {
  this.bookings = [];
}

Cinema.prototype.addBooking = function(custId, custName, film, showDate){
  this.bookings[custId] = new CustomerBooking(custId, custName, film, showDate);
};

Cinema.prototype.findBooking = function () {
  var findID = parseInt(inputBox.value);
    var bookingSummary = "<table  border='1'>";
    for ( var booking in this.bookings ) {
         if ( findID === this.bookings[booking].custId ) {
             bookingSummary += "<tr><td>";
             bookingSummary += this.bookings[booking].getCustId();
             bookingSummary += "</td>";

             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getCustName();
             bookingSummary += "</td>";

             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getFilm();
             bookingSummary += "</td>";

             bookingSummary += "<td>";
             bookingSummary += this.bookings[booking].getShowDate();
             bookingSummary += "</td>";
             bookingSummary += "</tr>";
         }
    }
             bookingSummary += "</table>";
             document.getElementById('result').innerHTML = bookingSummary;
};

Cinema.prototype.getBookings = function() {
  var booking;
  var bookingsTable = "<table border='1'>";
  for ( booking in this.bookings ){
       bookingsTable += "<tr><td>";
       bookingsTable += this.bookings[booking].getCustId();
       bookingsTable += "</td>";

       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getCustName();
       bookingsTable += "</td>";

       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getFilm();
       bookingsTable += "</td>";

       bookingsTable += "<td>";
       bookingsTable += this.bookings[booking].getShowDate();
       bookingsTable += "</td>";

       bookingsTable += "</tr>";

  }

       bookingsTable += "</table>";

      return bookingsTable;
};



var odeon = new Cinema();

odeon.addBooking(140, "Arnold Clark", "Step Up", "22 May 2016 19:45");
odeon.addBooking(193, "Janine Booth", "Lover", "31 May 2016 17:30");
odeon.addBooking(440, "Angela Picker", "Spice N Honey", "09 June 2016 15:00");
odeon.addBooking(390, "Cathrine Macintosh", "Avengers", "13 June 2016 20:30");
odeon.addBooking(420, "Smantha Jones", "Hangover 2", "20 May 2016 16:30");

//document.write(odeon.getBookings());

find.onclick = function () {
  odeon.findBooking();
};

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <input type="text" id="inputBox">
  <input type="submit" value="Find Booking" id="find">
  <br>
  <div id="result"></div>
</body>
</html>

【讨论】：

【解决方案3】：

您正在通过

添加结果表

document.write(bookingSummary);

这会将表格的新 HTML 直接添加到 HTML 文档中编写这行代码的位置。因此，表格被添加到 body 元素之前。

您可以考虑将 html 添加到正文或添加到标记的特定元素。假设您为结果表保留了一个 div（在搜索字段之后）。

<div id="resultTable"></div>

然后您可以将表格添加到其中

document.getElementById('resultTable').appendChild(bookingSummary);

【讨论】：