如何将 JavaScript 变量设置为文本区域标记的内容？

如何将 JavaScript 变量设置为文本区域标记的内容？

我目前正在尝试将 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">

<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>

胡子哥哥

浏览 132回答 3

3回答

杨魅力

var t =  document.getElementById("text").valuefunction 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;}

0

0

ABOUTYOU

将 var 声明放入函数中：function func() {   var t =  document.getElementById("text").value   document.getElementById("ascii").value = t;}

0

0

largeQ

您仅声明一次值，t而无法在单击按钮时查找并获取该值。任何您想要多次执行的任务都必须在函数或重复出现的表达式中，等等。以下演示仅在函数外部声明一个变量，其余变量在函数内部 - 详细信息在演示中注释。顺便说一句，如果您正在处理表单字段（例如输入、输出、文本区域等），那么您有必要扭曲表单中的所有内容并使用表单来管理所有表单字段。演示// Reference the formconst editor = document.forms.editor;// Register the form to the input eventeditor.oninput = edit;// pass the event objectfunction 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>

0

0

随时随地看视频慕课网APP

相关分类

Html5