如何将JavaScript变量设置为textarea标记的内容



我目前正试图将我的JavaScript变量设置为第一个<textarea>标记中键入的任何变量,但它不起作用,我不知道如何修复它,因为我对JavaScript没有太多经验。非常感谢任何人的帮助。自从我想不出什么可以尝试的东西后,我就再也没有尝试过。

var t =  document.getElementById("text").value
function func() {
document.getElementById("ascii").value = t;
}
.con {
display: flex; 
margin-top: 2px;
margin-left: 20px;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
height: 60px;
width: 140px;
border-radius: 0 10px;
margin-top: 0px;
font-size: 22px;
cursor: pointer;
}
.txt {
display: flex; 
margin-right: 20px;
background: #ffffff;
border: 0;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 0px;
}
.text {
border: none;
margin-top: 18px;
margin-left: 18px;
height: 660px;
width: 630px;
outline: none;
font-size: 22px;
resize: none;
}
.asci {
background: #ffffff;
border: 0;
outline: none;
height: 700px;
width: 45%;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.ascii {
border: none;
margin-top: 20px;
margin-left: 10px;
height: 660px;
width: 640px;
outline: none;
font-size: 22px;
resize: none;
}
<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="ascii.css">
</head>
<body>
<div class="con">
<!--button onclick="func()">button</button-->
<form class="txt">
<textarea class="text" id="text" type="text" placeholder="type your text here!"></textarea>        
<input class="button" type='button' value="alphabetize" onclick="func()">
</form>
<form class="asci">
<textarea class="ascii" id="ascii" type="text"></textarea>
</form>
</div>
<script src="ascii.js"></script>
</body>
</html>

var t =  document.getElementById("text").value
function func() {
document.getElementById("ascii").value = t;
}

目前,您的var t = document.getElementById("text").value代码将只执行一次。第一次,由于textArea第一次为空,因此值将为"。

您需要将其移动到func()中,以便每次执行func()时,它都会得到最新的值

function func() {
var t =  document.getElementById("text").value
document.getElementById("ascii").value = t;
}

将var声明放入函数中:

function func() {
var t =  document.getElementById("text").value
document.getElementById("ascii").value = t;
}

您只声明t的值一次,而无法在单击按钮时查找和获取值。任何你想做多次的任务都必须在函数或重复出现的表达式中,等等。下面的演示只声明了函数外的一个变量,其余的都在函数内——详细信息在演示中注释。

顺便说一句,如果你正在处理表单字段(例如输入、输出、文本区域等(,那么你应该扭曲表单中的所有内容,并使用表单来管理所有表单字段。

Demo

// Reference the form
const editor = document.forms.editor;
// Register the form to the input event
editor.oninput = edit;
// pass the event object
function edit(event) {
/*
= 'this' is the form
= `field` is a NodeList of inputs, buttons, textareas, 
etc
*/
const field = this.elements;

/*
= event.target is the tag the user interacted with 
In this case it would be textarea#in
*/
const input = event.target;

// Reference textarea#out
const output = field.out;

/*
= if the event.target is textarea#in...
= Set the value of textarea#out to the value of
textarea#in 
*/
if (input.id === 'in') {
output.value = input.value;
}
}
<form id='editor'>
<textarea id='in'></textarea>
<textarea id='out'></textarea>
</form>

最新更新