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

Caesar Bell
Caesar Bell
24,827 Points
Posted by Caesar Bell
Caesar Bell
24,827 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,813 Points
rydavim
rydavim
18,813 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,827 Points
Caesar Bell
Caesar Bell
24,827 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,827 Points
Caesar Bell
Caesar Bell
24,827 Points

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

Caesar Bell
Caesar Bell
24,827 Points
Caesar Bell
Caesar Bell
24,827 Points

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

Caesar Bell
Caesar Bell
24,827 Points
Caesar Bell
Caesar Bell
24,827 Points

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