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 Kelvin Lin
Kelvin Lin
550 Points

[js] basic question about get element by id

<form method="get"> <h2>Please leave your contact information for us</h2>

<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>

<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>

<label for="email">E-mail:</label>
<input type="e-mail" id="email" name="eMail"><br>


<label for="password">Password:</label>
<input type="password" id="password" name="passWord"><br>

<label for="suGession">sub gesstion:</label><br>
<textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea>
<br>
<br>
<p>What do you usually cook?</p>
<input type="text">
<button type="submit" onclick="welcome()">Give Us Help</button>

</form>

var first = document.getElementById("FirstName"); var last = document.getElementById("LastName");

function welcome(){

    var welcomeF = "Welcome" + first +" "+ last;
    return welcomeF;

}

console.log(welcome());

Could somebody help me with this basic question? I'd like to print hello + full name. But it isn't work.

1 Answer

andi mitre
STAFF
andi mitre
Treehouse Guest Teacher
andi mitre
andi mitre
Treehouse Guest Teacher

Hey Kelvin,

I have left comments in the code below. Hope that helps!

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
<h2>Please leave your contact information for us</h2>

<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>

<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>

<label for="email">E-mail:</label>
<input type="email" id="email" name="eMail"><br>


<label for="password">Password:</label>
<input type="password" id="password" name="passWord"><br>

<label for="suGession">sub gesstion:</label><br>
<textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea>
<br>
<br>
<p>What do you usually cook?</p>
<input type="text">
<button type="submit" onclick="welcome()">Give Us Help</button>

<script type="text/javascript">
    function welcome(){

        // to retreive the input value you have to select the element by providing the matching id then 
        // get the value by calling the value js function 

        var firstName = document.getElementById('FirstName').value;
        var lastName = document.getElementById('LastName').value;
        var email = document.getElementById('email').value;

        // to print to screen use document.write or to print to console use console.log as you had it

        document.write('Hello ' + firstName + ' ' + lastName);


    }

</script>

</body>
</html>