显示输入回到用户 - javascript

我发现了几个问题，如何做到这一点的答案，但我认为我的问题是一个有趣的问题。我想让一个用户在文本框中输入他们的名字，然后一旦他们点击一个按钮，它就会将其显示回给他们。显示输入回到用户 - javascript

这是我的代码：

<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>

来源

2016-02-26 WitchKing17

将'var input = document.getElementById（“name”）。value;'放入函数中。实质上，该代码运行第二次页面加载，早在任何输入之前。你想在点击按钮后获取该值，所以将其放入函数中。 –

以及我在回答看起来你去的答案，看到这个小提琴https://jsfiddle.net/zcv1awwt/只是把脚本代码在身体 – Muath

您需要将input的声明放入您的display函数中。

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

正如你现在拥有它，加载页面时的input值存储，因此它不会自动更新。

来源

2016-02-26 21:11:39 Bucket

input = document.getElementById("name").value;应该位于功能display()之内，因为您将始终将其设置为初始值（空白）。

来源

2016-02-26 21:12:07

你现在的问题是：var input = document.getElementById("name").value; 当程序加载时立即触发。

为了解决这个问题，这样做：

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

这样一来，输入变量被分配每次函数称为输入元件的电流值。

这是一个fiddle表明input变量赋值在页面加载时触发。我在输入中添加了一个默认值，以表明无论您事后改变了什么，该值始终是默认值。

来源

2016-02-26 21:12:50 kemiller2002

显示输入回到用户 - javascript

回答

相关问题