Joseph Yi Joseph Yi - 5 months ago 9
HTML Question

Bootstrap panels not displaying body text

For some reason my bootstrap panels won't show the body text. I have set up all my elements via DOM Manipulation.

My panel header text displays properly, however my body text doesn't show up.

I also noticed that the bootstrap panel body content does not have any elements, just lines of text.

I have tried to add text elements to it but so far nothing has been working. Here is my code:

JS

var searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', function() {
var term = document.getElementById('term').value;
var matched = [];
for (var i = 0; i < hotelRooms.length; i++) {
if (hotelRooms[i].hotel.indexOf(term) !== -1) {
matched.push(hotelRooms[i]);
}
}

for (var i = 0; i < matched.length; i++) {

var roomResults = document.createElement('div');
roomResults.setAttribute('id', 'results');
roomResults.setAttribute('class', 'result-style');

var resultsArea = document.getElementById('results-area');
console.log(matched[i]);

var panelDefault = document.createElement('div');
panelDefault.setAttribute('class', 'panel-default');

var panelHeading = document.createElement('div');
panelHeading.setAttribute('class', 'panel-heading');

var panelBody = document.createElement('div');
panelBody.setAttribute('class', 'panel-body');

var name = document.createElement('h3'); // Hotel Name
name.setAttribute('class', 'hotel-name');
name.textContent = matched[i].hotel;

var price = document.createElement('div'); // Room Price
price.setAttribute('class', 'room-price');
price.textContent = matched[i].price;

roomResults.appendChild(panelDefault);
panelDefault.appendChild(panelHeading);
panelHeading.appendChild(name);
panelBody.appendChild(price);

resultsArea.appendChild(roomResults);
}
});

Answer

You are never appending panelBody to panelDefault.

....
roomResults.appendChild(panelDefault);
panelDefault.appendChild(panelHeading);
panelHeading.appendChild(name);
panelBody.appendChild(price);
panelDefault.appendChild(panelBody);
....