向用戶顯示輸入-javascript

Question

我發現了幾個問題以及有關如何執行此操作的答案，但我認為我的問題很有趣。 我試圖讓用戶在文本框中輸入他們的名字，然后一旦他們按下按鈕，它將顯示給他們。

這是我的代碼：

<html>
<head>
    <title>Side Bar test</title>
    <link rel="stylesheet" href="test.css" />
</head>

<body>
    <div id="sideWrapper">
        <p id="wrapper"><label for="name">Name: <input type="text" name="name" id="name"></p>
        <button onclick="display();">Submit</button>
        </br>

        <div id="playerName">

        </div>
    </div>
</body>

<script type="text/javascript" language="javascript">
    var input = document.getElementById("name").value;

    function display() {
        document.getElementById("playerName").innerHTML = "<p>Player: " + input + "</p>";
    }
</script>

調用document.getElementById("name").value ，它僅采用首次加載頁面時文本字段中的內容。 之后嘗試更新它並單擊按鈕不起作用。 因此，如果您在字段中鍵入“ John Doe”，然后重新加載頁面並單擊按鈕，它將顯示John Doe。 但是，如果您嘗試更改它，則它將不起作用。 我嘗試將腳本移到<head>但這只會使它不確定。

我如何才能使display()函數看到用戶在框中鍵入的內容並進行更新以將其打印到屏幕上？

編輯：通過將輸入行移入功能體來修復代碼。

<script type="text/javascript" language="javascript">
    function display() {
        var input = document.getElementById("name").value;
        document.getElementById("PlayerName").innerHTML = "<p>Player: " + input + "</p>";
    }
</script>

Answer 1

您需要將input聲明放入display函數中。

function display() {
    var input = document.getElementById("name").value;
    document.getElementById("playerName").innerHTML = "<p>Player: " + input + "</p>";
}

如您目前所擁有的那樣， input值是在頁面加載時存儲的，因此不會自動更新。

Answer 2

input = document.getElementById("name").value; 應該位於函數display() ，因為您將始終將其設置為初始值（空）。

Answer 3

您的問題是這樣的： var input = document.getElementById("name").value; 程序加載后立即觸發。

要解決此問題，請執行以下操作：

function display() {
    var input = document.getElementById("name").value;
    document.getElementById("playerName").innerHTML = "<p>Player: " + input + "</p>";
}

這樣，每次調用函數時，都會為輸入變量分配輸入元素的當前值。

這是一個小玩意，表明在頁面加載時將觸發input變量賦值。 我在輸入中添加了一個默認值，以表明無論以后將其更改為什么，該值始終都是默認值。

向用戶顯示輸入-javascript

問題描述

3 個解決方案

解決方案1
2 已采納 2016-02-26 21:11:39

解決方案2
1 2016-02-26 21:12:07

解決方案3
1 2016-02-26 21:12:50

向用戶顯示輸入-javascript

問題描述

3 個解決方案

解決方案1 2 已采納 2016-02-26 21:11:39

解決方案2 1 2016-02-26 21:12:07

解決方案3 1 2016-02-26 21:12:50

解決方案1
2 已采納 2016-02-26 21:11:39

解決方案2
1 2016-02-26 21:12:07

解決方案3
1 2016-02-26 21:12:50