为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

胡子哥哥 2024-01-03 16:47:37
我目前正在尝试将 JavaScript 变量设置为输入到第一个<textarea>标签中的任何内容,但它不起作用,而且我不知道如何修复它,因为我对 JavaScript 没有太多经验。非常感谢任何人的帮助。我没有尝试过任何其他的事情,因为我想不出有什么可以尝试的。var t =  document.getElementById("text").valuefunction 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>
查看完整描述

3 回答

?
杨魅力

TA贡献1811条经验 获得超6个赞

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;

}


查看完整回答
反对 回复 2024-01-03
?
ABOUTYOU

TA贡献1812条经验 获得超5个赞

将 var 声明放入函数中:


function func() {

   var t =  document.getElementById("text").value

   document.getElementById("ascii").value = t;

}


查看完整回答
反对 回复 2024-01-03
?
largeQ

TA贡献2039条经验 获得超7个赞

您仅声明一次值,t而无法在单击按钮时查找并获取该值。任何您想要多次执行的任务都必须在函数或重复出现的表达式中,等等。以下演示仅在函数外部声明一个变量,其余变量在函数内部 - 详细信息在演示中注释。


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


演示

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


查看完整回答
反对 回复 2024-01-03
  • 3 回答
  • 0 关注
  • 131 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信