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 jQuery Basics (2014) Creating a Mobile Drop Down Menu Getting a value

ashique desai
ashique desai
3,662 Points
Posted by ashique desai
ashique desai
3,662 Points

How to get the title value and show it in the dialog box with j Query?

Please let me know what is wrong with this code. i am not able to get the value of the title in this j Query challenge.

js/app.js 
```JavaScript
//Select the input for the title for blog post.
var $titleInput = $("#title");

//Select the preview h1 tag
var $previewTitle = $("#titlePreview");

// Every second update the preview
var previewTimer = setInterval(updatePreview, 1000);

function updatePreview(){  
  //Get the user's input
  var titleValue = $titleInput;
  $previewTitle.val($titleInput);
  //Set the user input as the preview title. 
  $previewTitle.text(titleValue.text());

}

```index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
  <div id="form">
    <label for="title">Blog Post Title</label><input id="title" name="title" value="" placeholder="Enter your blog title here">
  </div>
  <div id="preview">
    <h1 id="titlePreview"></h1>
  </div>
  <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
theme.css 
  #form {
    width: 45%;
    float: left;
  }
  #preview {
    width: 45%;
    float: right;
  }
  label {
    width: 20%;
    display: inline-block;
  }
  input {
    width: 70%;
  }

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I feel like you were pretty close on this one. However, only one line needed to be changed.

Here's how I did it:

  var titleValue = $titleInput.val();

Because we've already created a jQuery object and assigned it to a variable named $titleInput, we can run the val method directly on the object without arguments. This will return the value stored in that element and assign it to the titleValue variable.

Hope this helps! :sparkles:

Dor Sarel
Dor Sarel
9,987 Points
Dor Sarel
Dor Sarel
9,987 Points

HI, The challenge ask you to take the value from the input. to do this you need to assign your titleValue variable to the the $titleInput var and use the var() method to grab the value.

var titleValue = $titleInput.val();

this will assign the value from the input to the variable.

ashique desai
ashique desai
3,662 Points
ashique desai
ashique desai
3,662 Points

Thanks a lot Dor really appreciate your help