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时，只会在加载页面第一次时占用文本字段中的内容。尝试在单击按钮后更新它并不起作用。所以，如果你键入＆＃34; John Doe＆＃34;在该字段中然后重新加载页面并点击按钮，它将显示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>";
}

这样，每次调用函数时，都会为输入变量分配输入元素的当前值。

以下是fiddle，表示在加载页面时会触发input变量赋值。我在输入中添加了一个默认值，以表明无论您将其更改为什么，该值始终是默认值。

向用户显示输入 - javascript

3 个答案: