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。