javascript 获取输入值并显示在另一个 div 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20754131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Take input value and display in another div
提问by MattSizzle
I cant for the life of me figure out why the following is not working. I took if from the W3school example here.
我一生都无法弄清楚为什么以下内容不起作用。我从这里的 W3school 示例中获取了 if 。
Basically I want to take the value from the input text when it changes and modify another div to include the value. I only want the div to show the new value, but I do want it to change it each time so I figured the onchange was the way to go.
基本上我想在输入文本更改时从输入文本中获取值并修改另一个 div 以包含该值。我只希望 div 显示新值，但我确实希望它每次都改变它，所以我认为 onchange 是要走的路。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + x.value;
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<div id="divID"></div>
</body>
</html>
Thanks in advance for all the help on this one.
在此先感谢您对这一问题的所有帮助。
回答by Chancho
You have 2 problems, first is that x is undefined. second you should use another trigger for this for this to happen each time.
您有两个问题，首先是 x 未定义。其次，您应该为此使用另一个触发器，以便每次都发生这种情况。
try this out:
试试这个：
function myFunction()
{
var input = document.getElementById('fname')
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + input.value;
}
and change your html to:
并将您的 html 更改为：
<input type="text" id="fname" onkeypress="myFunction()">
回答by xdazz
xis undefined in your function, it should be document.getElementById('fname').
x在您的函数中未定义，它应该是document.getElementById('fname').
And if you want to change the div each time you press the key, use onkeyupor onkeypressinstead of onchange.
如果您想在每次按键时更改 div，请使用onkeyup或onkeypress代替onchange。
回答by xdazz
You may change x.valueto document.getElementById("fname").value, if I understand your question correctly.
如果我正确理解您的问题，您可以更改x.value为document.getElementById("fname").value。
回答by Elmir Kouliev
Ok, so check this out - http://jsfiddle.net/2ufnK/2/
好的，所以检查一下 - http://jsfiddle.net/2ufnK/2/
The issue is that you need to define x here,
问题是你需要在这里定义 x，
var x = document.getElementById("fname");
var x = document.getElementById("fname");
x now references to the html object.
x 现在引用 html 对象。
Then you can just call the, ".value", method to get its text. Then everything else works the way you've written it.
然后你可以调用“.value”方法来获取它的文本。然后其他一切都按照您编写的方式工作。
回答by freerunner
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="[email protected]" id="email" onchange="input()">
<input type="submit" name="save" value="save">
</form>
<div id="display"></div>
