怎么将输入框的内容输出在textarea里(语言-javascript)
怎么将输入框的内容输出在textarea里
<html lang="en">
<head>
<title>报表生成器</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/random_pw.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<div style="text-align:center;">
<img src="img/logo.png">
</div>
<h3 style="text-align: center;">XX店</h3>
<div style="width: 70%; margin: auto;">
<form class="el-form demo-ruleForm el-form--inline">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">累计营业额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入累计营业额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">折前营业额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入折前营业额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">实收营业额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入实收营业额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">客单价</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入客单价" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">销售单数</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入销售单数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">销售总杯</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入销售总杯" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">堂食销售大桶</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入堂食销售大桶数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">堂食销售中杯</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入堂食销售中杯数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">美团单数</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入美团单数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">美团销售额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入美团销售额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">饿了么单数</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入饿了么单数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">饿了么销售额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入饿了么销售额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">当日主推</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="checkbox" name="pd" checked>栗栗麻薯
<input type="checkbox" name="pd" checked>芋泥椰椰
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">主推占比%</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入主推占比" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-divider el-divider--horizontal">门店追踪事项</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">当日工时</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入当日工时" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">超出原因</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入超出原因" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">主推是否达标</label>
<div class="el-form-item__content">
<div class="">
<input type="radio" name="pd" checked="checked" >达标
<input type="radio" name="pd" >未达标
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">原因</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入原因" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">有无差评是否解决</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入差评是否解决" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">当日主推</label>
<select class="el-input__inner">
<option>栗栗麻薯</option>
<option>芋泥椰椰</option>
<option></option>
<option></option>
</select>
</div>
</form>
</div>
<div class="el-divider el-divider--horizontal">
<!---->
</div>
<div style="margin: 20px 0px;"></div>
<div style="width: 80%; margin: auto;">
<div class="el-row">
<div class="el-textarea">
<textarea autocomplete="off" id="input_passwordtext" placeholder="生成报表输出位置" class="el-textarea__inner" style="resize: none; min-height: 54px; height: 500px;"></textarea>
<!---->
</div>
</div>
</div>
<div style="margin: 20px 0px;"></div>
<div class="el-row" style="text-align: center; padding-bottom: 20px;">
<button type="button" class="el-button el-button--danger is-round">
<!---->
<!---->
<span>恢复默认</span>
</button>
<button type="button" class="el-button el-button--info is-round">
<!---->
<!---->
<span>清空报表</span>
</button>
<button type="button" class="el-button el-button--primary is-round">
<!---->
<!---->
<span>复制报表</span>
</button>
<button type="button" class="el-button el-button--success is-round">
<!---->
<!---->
<span>生成报表</span>
</button>
</div>
</div>
</body>
</html>
```
<html lang="en">
<head>
<title>报表生成器</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/random_pw.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<div style="text-align:center;">
<img src="img/logo.png">
</div>
<h3 style="text-align: center;">XX店</h3>
<div style="width: 70%; margin: auto;">
<form class="el-form demo-ruleForm el-form--inline">
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">累计营业额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入累计营业额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">折前营业额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入折前营业额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">实收营业额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入实收营业额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">客单价</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入客单价" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">销售单数</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入销售单数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">销售总杯</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入销售总杯" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">堂食销售大桶</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入堂食销售大桶数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">堂食销售中杯</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入堂食销售中杯数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">美团单数</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入美团单数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">美团销售额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入美团销售额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">饿了么单数</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入饿了么单数" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">饿了么销售额</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入饿了么销售额" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">当日主推</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="checkbox" name="pd" checked>栗栗麻薯
<input type="checkbox" name="pd" checked>芋泥椰椰
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">主推占比%</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入主推占比" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-divider el-divider--horizontal">门店追踪事项</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">当日工时</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入当日工时" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">超出原因</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入超出原因" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">主推是否达标</label>
<div class="el-form-item__content">
<div class="">
<input type="radio" name="pd" checked="checked">达标
<input type="radio" name="pd">未达标
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">原因</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入原因" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">有无差评是否解决</label>
<div class="el-form-item__content">
<div class="el-input">
<input type="text" autocomplete="off" placeholder="请输入差评是否解决" class="el-input__inner">
</div>
<!---->
</div>
</div>
<div class="el-form-item">
<label class="el-form-item__label" style="width: 100px;">当日主推</label>
<select class="el-input__inner">
<option>栗栗麻薯</option>
<option>芋泥椰椰</option>
<option></option>
<option></option>
</select>
</div>
</form>
</div>
<div class="el-divider el-divider--horizontal">
<!---->
</div>
<div style="margin: 20px 0px;"></div>
<div style="width: 80%; margin: auto;">
<div class="el-row">
<div class="el-textarea">
<textarea autocomplete="off" id="input_passwordtext" placeholder="生成报表输出位置" class="el-textarea__inner"
style="resize: none; min-height: 54px; height: 500px;"></textarea>
<!---->
</div>
</div>
</div>
<div style="margin: 20px 0px;"></div>
<div class="el-row" style="text-align: center; padding-bottom: 20px;">
<button type="button" class="el-button el-button--danger is-round">
<!---->
<!---->
<span>恢复默认</span>
</button>
<button type="button" class="el-button el-button--info is-round">
<!---->
<!---->
<span>清空报表</span>
</button>
<button type="button" class="el-button el-button--primary is-round">
<!---->
<!---->
<span>复制报表</span>
</button>
<button type="button" class="el-button el-button--success is-round">
<!---->
<!---->
<span>生成报表</span>
</button>
</div>
</div>
<script>
let allInputElement = document.getElementsByTagName("input");
function fillTextArea() {
var value = ''
for (let i = 0; i < allInputElement.length; i++) {
let elementElement = allInputElement[i];
value += elementElement.parentNode.parentNode.previousSibling.previousSibling.innerText + ":" + elementElement.value + "\n"
}
document.getElementsByTagName('textarea')[0].value = value
}
for (let i = 0; i < allInputElement.length; i++) {
allInputElement[i].onkeyup = fillTextArea
}
</script>
</body>
</html>
可以考虑学习一下 https://www.runoob.com/js/js-tutorial.html ，js还是比较好学的
textarea取值
let areaValue=document.getElementById("input_passwordtext").value;
textarea赋值
document.getElementById("input_passwordtext").value=“你想要给的值”;
```
通过dom去操作相关的元素就可以了。
看你用的是 elementui 框架 配合 vue 可以很方面完成文本域的赋值，具体参考elementui 官方文档