实现一个连接字符串效果,在俩个输入框中分别输入字符串,单击提交按钮后,输出俩个字符串连接后的字符串HTML
时间: 2024-12-26 16:28:46 浏览: 13
要在HTML中实现这个功能,你可以创建一个简单的表单,包含两个输入框和一个提交按钮,然后利用JavaScript来处理用户输入并在提交后连接这两个字符串。以下是示例代码:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>连接字符串</title>
<style>
#result {
margin-top: 10px;
}
</style>
</head>
<body>
<input type="text" id="input1" placeholder="请输入字符串1">
<input type="text" id="input2" placeholder="请输入字符串2">
<button onclick="joinStrings()">提交</button>
<div id="result"></div>
<script>
function joinStrings() {
const input1 = document.getElementById('input1').value;
const input2 = document.getElementById('input2').value;
if (input1 && input2) { // 检查输入是否为空
const result = `${input1} ${input2}`;
document.getElementById('result').innerText = `连接后的字符串: ${result}`;
} else {
alert("请输入完整的信息!");
}
}
</script>
</body>
</html>
```
在这个示例中,当用户单击“提交”按钮时,`joinStrings`函数会被触发,它从输入框获取值,检查是否有输入,如果有,则连接这两个字符串,并将其显示在id为`result`的段落中。
阅读全文