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 Introducing jQuery Getting Values from Form Fields

Posted by Simone Chinaglia
Simone Chinaglia
Courses Plus Student 2,856 Points

I don't understand how to do this challange

I follow the step but how can i add the new val to change the html selector?

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h2 class="profile-name">Treasure Porth</h2>
    <p class="profile-text">I am a web developer!</p>

    <label>Change name:<input id="name-input" type="text"></label>
    <button>Change</button>

    <script
    src="jquery-3.2.1.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
app.js 
$('button').click(function() {
    const content = $('#name-input').val('');
    $('#name-input').html(content);
});
Jeremiah Mountain
Jeremiah Mountain
9,124 Points
Jeremiah Mountain
Jeremiah Mountain
9,124 Points

Using the things you learn from the video- this is what they are asking for as a solution.

$('button').click(function() { const newName = $('#name-input').val(); $('.profile-name').text(newName); });

3 Answers

Jazz Jones
Jazz Jones
8,535 Points
Jazz Jones
Jazz Jones
8,535 Points

You need to follow the instructions exactly in the challenge. Your const variable should be newName and not content. When selecting the element in the jQuery object that's going to add the text, you need to select the class .profile-name, since the element with the ID, name-input, is an input element, and the class profile-name is an h2 element. Finally you need to use the text method and not the html method.

Laura Rodriguez
Laura Rodriguez
8,284 Points
Laura Rodriguez
Laura Rodriguez
8,284 Points

I was like you !!!.

It was the solution I found. Good luck! $('button').click(function() { // Write code here const newName = $('#name-input').val(); $('#name-input').html("#name-input"); });

Jazz Jones
Jazz Jones
8,535 Points
Jazz Jones
Jazz Jones
8,535 Points

Take out the empty string in the val() method, and keep it's arguments empty. the .val() method is a getter, so you need to leave it empty so it can fetch the information you want and store it the variable content.

Simone Chinaglia
Simone Chinaglia
Courses Plus Student 2,856 Points

i tried, but i see this message "Within the anonymous function passed to the "click" method call, did you declare a variable with the name "newName" for the "val" method call's return value on the jQuery object with an argument of "'#name-input'"?"