向用户显示输入-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