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

JavaScript

Posted by Derek Vha
Derek Vha
10,452 Points

Jquery Help - Fetching keyboarding input and using it to amend html

Hi All,

I am running into some trouble with my JQuery.

What I am trying to do is fairly simple, but for some reason its not working. I have 3 cities on my html, each with its 'price per night' stored in a data attribute.

I then ask the user for a 'number of nights' for each city. This should then change the .details text to read something like "3400 for 3 nights" if the user entered 3 into the box.

I think the line causing the issues is:

$(this).closest.('.tour').Find('.details').text(nights*nightprice + " for " + nights + " nights");

But i cant seem to figure it out. Any help please.

html:

<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>

<body>
<div id="tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="usa tour">
      <h2>New York, New York</h2>
      <span class="details" data-price-night="271">$1,899 for 7 nights</span>
      <button class="book">Book Now</button>
      <br><span><input id='nights'>Number of Nights</span>
    </li>
    <li class="europe tour">
      <h2>Paris, France</h2>
      <span class="details" data-price-night="328">$2,299 for 7 nights</span>
      <button class="book">Book Now</button>
       <br><span><input id='nights'>Number of Nights</span>
    </li>
    <li class="asia tour">
      <h2>Tokyo, Japan</h2>
      <span class="details" data-price-night="542">$3,799 for 7 nights</span>
      <button class="book">Book Now</button>
       <br><span><input id='nights'>Number of Nights</span>
    </li>
  </ul>


</div>
<div id="clickme">
   <span id = 'click'>Click here</span>
</div>
<img id="squirel" src="http://www.extremetomato.com/misc/files/Random%20images/Squirrel.jpg" alt="" width="200" height="253">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="application2.js"></script>
</body>
</html>

Jquery:

$(document).ready(function () {
        // Instead of attaching to the `.tour` lets just bind to the `.book` button.
    $(".book").on("click", function () {
        var callNow = $(
            '<span class="details-call-now">Call 1-555-jquery-air to book this tour</span>'
        );
        var cancelBtn = $('<button class="cancel">Cancel</button>');

        // Since we want to show details again, just hide them instead of remove.
        $(this).siblings('.details').hide();

        // Insert the Call Now Text right before the Book Button
        $(this).before(callNow);

        // Hide The Book Button
        $(this).hide();

        // Insert the Cancel button after the Book Button.
        $(this).after(cancelBtn);
    });

    // We attach to an element that we know is on the page at the time of load,
    // First arg is events
    // Second arg is a selector
    $("body").on("click", ".cancel", function () {
        // Get Sibling .book button and show it again
        $(this).siblings('.book').show();

        // Remove the sibling call now element
        $(this)
            .siblings(".details-call-now")
            .remove();

        // Get Sibling details and show
        $(this).siblings('.details').show()

        // Remove the Cancel Button that was clicked.
        $(this).remove();



    });




 $('#nights').on('keyup', function () {

   var nights = +$(this).val();

   var nightprice = +$(this).closest('.tour').data("price-night");

   $(this).closest.('.tour').Find('.details').text(nights*nightprice + " for " + nights + " nights");



});






});

1 Answer

Steven Parker
Steven Parker
243,173 Points
Steven Parker
Steven Parker
243,173 Points

I saw a few issues:

  • "nightprice" was being set from the "tour" element, but it's the "details" that have the data
  • there's a period between "closest" and the parentheses
  • "find" was spelled "Find" (capital "F)
   var nightprice = +$(this).closest('.tour').find('.details').data("price-night");
   console.log(nights, nightprice)
   $(this).closest('.tour').find('.details').text(nights*nightprice + " for " + nights + " nights");
Derek Vha
Derek Vha
10,452 Points

Hi Steven,

Thanks for helping. I've followed what you said and got it working somewhat. However only the first city updates the price once you enter the value into Number of nights.

If I try entering a value into the second input box (for the second city) or third input box (for the third city) nothing happens.

I would have though me using the 'this' object would solve this. Any ideas?

Thank you

Steven Parker
Steven Parker
243,173 Points
Steven Parker
Steven Parker
243,173 Points

The handler itself is OK; but a specific id can only be used once on a page, so only the first box is getting a handler attached. I recommend making "nights" a class instead of an id.

Derek Vha
Derek Vha
10,452 Points

thanks got it working :-)