document.getElementById无法正常运作

Question

由于某些原因，当我调用document.getElementById（“ userGuess”）。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") $input.val() || $input.attr("placeholder")使用JavaScript的OR运算符|| ，如果为真，则返回第一个操作数，否则为第二个操作数。 任何非空字符串都被认为是真实的，因此，如果用户实际输入了一个值，它将被警告，否则将警告占位符文本。

或没有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。