Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Caesar Bell
Caesar Bell
24,501 Points

JavaScript input value

can someone tell me why the value is not showing up on the page here my code

<html> <head> <title>Input</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body>

<form> <input type="text" id="username"> <input type="submit" onclick="otherName();" value="click me"> </form>

<div class="value-div"> <h1 class="value-heading"></h1> </div>

<!-- It is better to have the script files in the bottom, this allows the HTML to load first then the script --> <script type="text/javascript" src="js/input.js"></script> <script type="text/javascript"> function otherName(){ var input = document.getElementById("username").value; var answer = input; document.getElementById("value-heading").innerHTML = answer;

} </script> </body> </html>

5 Answers

rydavim
rydavim
18,780 Points

You're using getElementByID on a class name. Should work if you change either how you're getting the element, or just use an ID instead in the HTML.

// document.getElementById("value-heading").innerHTML = answer; 
// Changing how you get the element...
document.getElementsByClassName("value-heading")[0].innerHTML = answer;
<!-- <h1 class="value-heading"></h1> -->
<!-- Changing the class to an ID... -->
<h1 id="value-heading"></h1>
Caesar Bell
Caesar Bell
24,501 Points

I tried it you way and still nothing, I changed the HTML up a little added more of a style to it, but still cannot get the value to show up on the screen if I do an alert it shows up.

here is my new code: HTML <div class="main-section"> <div class="row row-1"> <div class="col-md-5 col-md-offset-3"> <h1 id="main-title">play the game dot come</h1> </div> </div> <div class="row"> <div class="col-md-5 col-md-offset-3"> <form> <input type="text" class="form-control" id="username" placeholder="username"> <button class=" submit-btn btn btn-default" onclick="otherName();">Click me</button> </form>

        </div>
    </div>
    <div class="row">
        <div class="col-md-5 col-md-offset-3">
            <div class="well well-input"></div>
        </div>
    </div>
</div>

JS

function otherName(){ var input = document.getElementById("username").value; document.getElementByClassName("well-input")[0].innerHTMl = input; }

Caesar Bell
Caesar Bell
24,501 Points

I realized I forgot the "s" but still not working when I add the "s" (ie getElementsByClassName)

Caesar Bell
Caesar Bell
24,501 Points

I realized I forgot the "s" but still not working when I add the "s" (ie getElementsByClassName)

Caesar Bell
Caesar Bell
24,501 Points

figure it out, thanks I did not put HTML right in "innerHTML"