Fatal编程技术网

将输入显示回用户-javascript

javascript html

将输入显示回用户-javascript,javascript,html,Javascript,Html,我发现了几个关于如何做到这一点的问题和答案，但我认为我的问题很有趣。我试图让一个用户在文本框中输入他们的名字，然后一旦他们点击一个按钮，它就会显示给他们 这是我的代码： <html> <head> <title>Side Bar test</title> <link rel="stylesheet" href="test.css" /> </head> <body> <div id

我发现了几个关于如何做到这一点的问题和答案，但我认为我的问题很有趣。我试图让一个用户在文本框中输入他们的名字，然后一旦他们点击一个按钮，它就会显示给他们

这是我的代码：

<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>
您需要将
输入的声明
放入
显示
函数中

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

函数显示（）{
var输入=document.getElementById（“名称”）.value；
document.getElementById（“playerName”）.innerHTML=“播放器：”+input+”
”；
}
正如您目前所拥有的，
input
的值在加载页面时存储，因此不会自动更新

您需要将
输入的声明放入
显示功能中


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



函数显示（）{
var输入=document.getElementById（“名称”）.value；
document.getElementById（“playerName”）.innerHTML=“播放器：”+input+”
”；
}



正如您目前所拥有的，
input
的值在加载页面时存储，因此不会自动更新
 输入=document.getElementById（“name”）.value
应该在函数
display（）
中，因为您将始终将其设置为初始值（空）。
输入=document.getElementById（“名称”）.value
应该在函数
display（）
中，因为您总是将其设置为初始值（空）。

您的问题在于：
var input=document.getElementById（“name”）.value
当程序加载时立即激发

要解决此问题，请执行以下操作：


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



函数显示（）{
var输入=document.getElementById（“名称”）.value；
document.getElementById（“playerName”）.innerHTML=“播放器：”+input+”
”；
}


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


下面是一个示例，显示在加载页面时触发
输入
变量赋值。我在输入中添加了一个默认值，以显示无论您在之后将其更改为什么，该值始终是默认值
 您的问题是：
var input=document.getElementById（“name”）.value
当程序加载时立即激发

要解决此问题，请执行以下操作：


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



函数显示（）{
var输入=document.getElementById（“名称”）.value；
document.getElementById（“playerName”）.innerHTML=“播放器：”+input+”
”；
}


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


下面是一个示例，显示在加载页面时触发
输入
变量赋值。我在输入中添加了一个默认值，以显示无论您在之后将其更改为什么，该值始终是默认值
 放入
var input=document.getElementById（“name”）.value在函数内部。本质上，该代码在页面加载的第二次运行，远远早于任何输入。您希望在单击按钮后获取该值，因此将其放在函数中。我刚才在回答时看到了答案，请看这个fiddles，将脚本代码放在body中放入
var input=document.getElementById（“name”）.value在函数内部。本质上，该代码在页面加载的第二次运行，远远早于任何输入。你想在点击按钮后获取这个值，所以把它放在函数中。我刚才在回答的时候看着你去回答，看这个小提琴，把脚本代码放在主体中