使用存储的变量连接多个 HTML 文本输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15730913/
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
Concatenate multiple HTML text inputs with stored variable
提问by drmscp
I am trying to create a simple html form which asks for some details from a user and once this has been submitted will add the text to some predetermined text in a text box.
我正在尝试创建一个简单的 html 表单，该表单要求用户提供一些详细信息，一旦提交，会将文本添加到文本框中的某些预定文本中。
Example of this...
这个例子...
Text box 1 - Enter Name Text box 2 - Enter Age Text box 3 - Enter Location
文本框 1 - 输入姓名 文本框 2 - 输入年龄 文本框 3 - 输入位置
When this is submitted I would like this to be added preferably into a text box or even just output has text on an html page with other text already stored so the output would maybe be something like "Hello John, you are 25 years old and from London".
提交时，我希望最好将其添加到文本框中，或者甚至只是在 html 页面上输出文本，其他文本已经存储，因此输出可能类似于“你好，约翰，你 25 岁，来自伦敦”。
What I have is very basic:
我所拥有的是非常基本的：
<html>
<form>
Name: <input type="text" name="name"><br>
Age: <input type="text" name="age"><br>
Location: <input type="text" name="location"><br>
<input type="submit" value="Submit">
</form>
<html>
Beyond this I'm unsure how to get all the values into another text box with the other predetermined text.
除此之外，我不确定如何将所有值与其他预定文本一起放入另一个文本框中。
Any help or direction in this would be appreciated.
在这方面的任何帮助或方向将不胜感激。
回答by Daniel Imms
Here is a solution, so get the elements using document.getElementById(), attach an event handler to the clickevent using element.onclick = function () {}and alert()to show a message box.
这是一个解决方案，因此使用 获取元素，使用document.getElementById()将事件处理程序附加到click事件element.onclick = function () {}并alert()显示消息框。
JavaScript
JavaScript
var button = document.getElementById('test');
var name = document.getElementById('name');
var age = document.getElementById('age');
var location = document.getElementById('location');
button.onclick = function () {
var str = 'Hello ' + name.value +
', you are ' + age.value +
' years old and from ' + location.value;
alert(str);
};
HTML
HTML
<label>
Enter name:
<input id="name" />
</label>
<br />
<label>
Enter age:
<input id="age" />
</label>
<br />
<label>
Enter location:
<input id="location" />
</label>
<br />
<button id="test">Test</button>
Edit
编辑
To output it to the page use element.innerHTMLto set the contents of an element.
要将其输出到页面，请使用element.innerHTML设置元素的内容。
output.innerHTML = str;
回答by Sharp Mouse
function yes() {
var button = document.getElementById('test');
var name = document.getElementById('name');
var age = document.getElementById('age');
var location = document.getElementById('location');
var str = 'Hello ' + name.value +
', you are ' + age.value +
' years old and from ' + location.value;
document.getElementById('test').innerHTML=str;
};<html>
<body>
<label>
Enter name:
<input id="name" />
</label>
<br />
<label>
Enter age:
<input id="age" />
</label>
<br />
<label>
Enter location:
<input id="location" />
</label>
<br />
<button onclick="yes()">Test</button>
<p id="test"></p>
</body>
</html>