Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Mauro Bonucci
5,953 PointsPopulate and add values
Hi there, im have to select boxes where the first select shows 2 hotels, and the second select box shows twoo options (single room, double room).
I thinking creating 2 arrays
var hotel1 = { "Option" : ["Single room", "Double room"], "Value" : [67, 77] //prices } var hotel2 = { "Option" : ["Single room", "Double room"], "Value" : [85, 95] //prices }
But im still thinking the best way in makiing this interactivity, could someone guide me the best ways in makint it or a video tut that explains this type of functionality specifilcally.
Thanks
6 Answers
Hugo Paz
15,622 PointsHi Mauro,
An option would be to have all the information in an literal object and access it depending on the selected hotel.
something like this:
var hotels = {
"First Hotel": {
'name': "First Hotel",
'single': 20,
'double': 35
},
"Second Hotel": {
'name': "Second Hotel",
'single': 40,
'double': 58
}
};
for(var key in hotels){
var obj = hotels[key];
for(var prop in obj){
if(obj.hasOwnProperty(prop)){
document.write(prop + " = " + obj[prop] + "</br>");
}
}
}
This will show all the properties of each hotel but you can change the code so according to the hotel selected, the remaining options in the form change accordingly.
Marcus Parsons
15,719 PointsI'm not sure exactly what you're asking, but those are great ways to get to those values (although I would set "Price" instead of "Value"). If we wanted to know what 10% off the cost of a Double Bedroom in hotel1 is, all we have to do is reference which index that price is set in (which is 1) and apply the math to it like so:
var discountedDoubleBedroomCost = hotel1.Value[1] - (hotel1.Value[1] * 0.1);
Remember that you use the dot notation to get to the keys of an object i.e. "Options" or "Value" (case sensitive). And then, if the value of that key is an array, you only need to reference the index of the thing you're looking for.
I hope that helps!
Mauro Bonucci
5,953 PointsHello Marcus, thanks for your answer, sorry if im not being clear, my english is not very good, im trying to achieve a result but im struggling with it, since one of the select forms depends each other, to better explain you, there are 2 select fields:
1 - Hotels (Hotel A, Hotel B) 2- Type of rooms (single room, and double room) 3- Each hotel have his own price in the single room and double room). Basically what im trying to do is based in the hotel and type of rooms are selected is show above in a div for example his price.
Basically this is what im trying to do.
Mauro Bonucci
5,953 PointsWell, im strugling in how i could use it in arrays so i tryed this way, is missing the rest of the hotel and room but i guess that is possible to get the ideia. what do you think Marcus?
$( document ).ready(function() {
$("#typeRoom").change(function(){
if($(this).val() == "Single room" && $("#hotel option:selected").val() == "Hotel Axor Barajas") {
$('#bookprice').html(68).append("€");
}
});
Marcus Parsons
15,719 PointsI think I get what you're trying to do, but your code is a little unclear. Can you edit your code according to what I'm going to show you? Make sure there are blank lines above the code block (and below if you have text underneath the code) like so:
'''javascript
//PASTE CODE HERE
'''
This will allow for accurate highlighting of the code. If you find that difficult, perhaps you can make a Codepen and save it, post the URL as a comment/answer on here at http://www.codepen.io.
Mauro Bonucci
5,953 PointsOk, here it is:
$("#typeRoom").change(function(){
if($(this).val() == "Single room" && $("#hotel option:selected").val() == "Hotel A") {
$('#bookprice').html(68).append("€");
}
else if($(this).val() == "Double room" && $("#hotel option:selected").val() == "Hotel A") {
$('#bookprice').html(79).append("€");
}
else if($(this).val() == "Single room" && $("#hotel option:selected").val() == "Hotel B) {
$('#bookprice').html(59).append("€");
}
else if($(this).val() == "Double room" && $("#hotel option:selected").val() == "Hotel B") {
$('#bookprice').html(89).append("€");
}
else{
$('#bookprice').html(0).append("€");
}
});
Marcus Parsons
15,719 PointsYou have to use backticks (on the same button as ~ generally) not single quotes. I only used single quotes so that the text would not render as code so I could show you what it looks similar to! haha
Mauro Bonucci
5,953 Pointslol, sorry
Marcus Parsons
15,719 PointsNo need to be sorry, my friend! haha
So, back to this, do you want a person to be able to select the type of room they want, in a given hotel, and then capture those values and post it back to the page?
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsI can dig it!
Mauro Bonucci
5,953 PointsMauro Bonucci
5,953 PointsVery nice, much better than mine. :P