1. ホーム
  2. 質問と答え
  3. ページに要素を追加すると入力フィールドが非表示になる

ページに要素を追加すると入力フィールドが非表示になる

2016-05-23 13 views
0

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>

出典

2016-05-23 knight

答えて

3

document.writeをテーブルを追加することができます

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

はすべてのコンテンツを上書きし、あなたの代わりに結果のための要素を作成する必要があり、検索ボタンがあるとき、結果の要素を更新しますクリックした以下の例を考えてみましょう：

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>

出典

2016-05-23 00:34:44 designcise

0

あなたは、これは、このコード行が書き込まれたHTML文書内の場所に直接テーブルの新しいHTMLを追加し

document.write(bookingSummary);

て結果テーブルを追加します。したがって、表はbody要素の前に追加されます。

htmlを本文に追加するか、マークアップに追加する特定の要素に追加することを検討できます。たとえば、検索フィールドの後に結果の表用に予約されたdivがあるとします。あなたは、あなたのコード内でそれに

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

出典

2016-05-23 00:25:35

1

あなたのアプローチの問題は、あなたが関数の結果を書くこと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>

出典

2016-05-23 00:39:29 Pranav

関連する問題

 関連する問題