Question

由于某些原因，当我调用document.getElementById（＆＃34; userGuess＆＃34;）。value时，警告框在显示文本框中当前显示的内容时不显示任何内容。我将不胜感激任何帮助。这是我的HTML和Javascript部分：

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

如果我了解你，问题不在于document.getElementById，而是你的元素最初实际上没有value，在这种情况下你想要显示来自而是placeholder属性。

如果是这样，以下是使用jQuery的方法：

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

演示：http://jsfiddle.net/ratp84gm/

这一部分：$input.val() || $input.attr("placeholder")使用JavaScript's OR operator ||，如果它是真实的，则返回第一个操作数，否则返回第二个操作数。任何非空字符串都被认为是真实的，因此如果用户实际输入了一个值，它将被警告，否则将提醒占位符文本。

或者没有jQuery的同样的事情：

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

演示：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

工作前

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

问题可能是您没有为文本框设置任何值，或者如果您想在某些事件中发出警报，那么您可以在特定事件中编写函数。这将在所有DOM在页面中完成加载后运行脚本。

 <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

将alert（）方法放在onclick函数中，如下所示：

<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是不必要的。使用常规JavaScript。

document.getElementById无法正常工作

5 个答案: