document.getElementById not working properly

Question

For some reason when I call document.getElementById("userGuess").value, the alert box shows nothing when it should show whatever is currently in the text box. I would appreciate any help. Here's my HTML and Javascript portions that are involved:

HTML:

<section class="game"> <!-- Guessing Section -->

            <h2 id="feedback">Make your Guess!</h2>

            <form>
                <input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
                <input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
            </form>

            <p>Guess #<span id="count">0</span>!</p>

            <ul id="guessList" class="guessBox clearfix">

            </ul>

        </section>

and Javascript:

alert(document.getElementById("userGuess").value);

Answer 1

If I understand you, the problem isn't with document.getElementById at all, it is that your element doesn't actually have a value initially and in that case you want to display the text from the placeholder attribute instead.

If so, here's how you can do it with jQuery:

$("#guessButton").click(function() {
    var $input = $("#userGuess");
    alert($input.val() || $input.attr("placeholder"));
});

Demo: http://jsfiddle.net/ratp84gm/

This part: $input.val() || $input.attr("placeholder") $input.val() || $input.attr("placeholder") uses JavaScript's OR operator || , which returns the first operand if it is truthy, otherwise the second operand. Any non-empty string is considered truthy, so if the user actually has entered a value it will be alerted, otherwise the placeholder text will be alerted.

Or the same thing without jQuery:

var input = document.getElementById("userGuess");
alert(input.value || input.placeholder);
// OR
alert(input.value || input.getAttribute("placeholder"));

Demo: http://jsfiddle.net/ratp84gm/1/

Answer 2

Try it
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required value="Guess"/>

Answer 3

Working Ex.

http://jsfiddle.net/scjdpy8v/

HTML

<!-- Guessing Section -->
<section class="game">
    <h2 id="feedback">Make your Guess!</h2>
    <form>
    <input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
    <input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
    </form>
    <p>Guess #<span id="count">0</span>!</p>
    <ul id="guessList" class="guessBox clearfix">
    </ul>
</section>

jQuery

$(function() {
  $('#userGuess').change(function() {
    var userGuess = $(this).val();
    console.log(userGuess);
  });
});

Answer 4

Problem might be that you had not set any value to the textbox or if you want to alert in some events then you can write function in the specific events. This will run the script after all DOM has finished loading in the page.

 <input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" value="something" required/>

 $(window).load(function(){
    var text = document.getElementById("userGuess").value;
    alert(text);
 });

Answer 5

Put the alert() method inside an onclick function like so:

<section class="game"> <!-- Guessing Section -->

        <h2 id="feedback">Make your Guess!</h2>

        <form>
            <input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
            <input onclick="alert(document.getElementById('userGuess').value)" type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
        </form>

        <p>Guess #<span id="count">0</span>!</p>

        <ul id="guessList" class="guessBox clearfix">

        </ul>

    </section>

JQuery is unnecessary. Use regular JavaScript.