1. Zuhause
  2. Frage und Antwort
  3. Anfügen von Element an die Seite blendet Eingabefeld

Anfügen von Element an die Seite blendet Eingabefeld

2016-05-23 8 views
0

Ich lerne JavaScript und und ich habe den Arbeitscode für mein Programm. Das einzige Problem, auf das ich stoße, ist, dass wenn die Methode findBooking aufgerufen wird und die Ergebnistabelle auf der Seite angezeigt wird, das Suchfeld ausgeblendet wird. Eine Idee, wie man es repariert?Anfügen von Element an die Seite blendet Eingabefeld

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>

Quelle

2016-05-23 knight

Antwort

3

document.write in Ihrem Code alle Inhalte überschreibt, müssen Sie stattdessen ein Element für die Ergebnisse erstellen, und die Ergebnisse Element aktualisieren, wenn die Schaltfläche Suchen ist geklickt. Betrachten Sie das folgende Beispiel:

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>

Quelle

2016-05-23 00:34:44 designcise

0

Sie fügen die Ergebnistabelle durch

document.write(bookingSummary);

Damit wird den neuen HTML-Code für den Tisch direkt an den Ort, in dem HTML-Dokument, in dem diese Zeile Code geschrieben . Daher wird die Tabelle vor dem body-Element hinzugefügt.

Sie können das Hinzufügen von HTML zum Body oder zu einem bestimmten Element, das Sie dem Markup hinzufügen, in Betracht ziehen. Angenommen, Sie haben ein div für die resultierende Tabelle reserviert (nach dem Suchfeld).

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

Sie dann die Tabelle

ihm hinzufügen 
document.getElementById('resultTable').appendChild(bookingSummary);

Quelle

2016-05-23 00:25:35

1

Das Problem mit dem Ansatz ist, dass Sie document.write() Funktion verwenden, um das Ergebnis der Funktion zu schreiben. Wenn Sie document.write() verwenden, sobald der Inhalt der Seite vollständig geladen ist, wird der gesamte auf der Seite vorhandene HTML-Code gelöscht und der in der document.write()-Funktion auf der Seite bereitgestellte Inhalt wird geschrieben. W3School Referece

Verwenden Sie ein neues Element für das Ergebnis anstelle des Dokuments. 

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>

Quelle

2016-05-23 00:39:29 Pranav

Verwandte Themen

 Verwandte Themen