Question

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

Answer 1

将您的var声明放入函数中：

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

Answer 2

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

Answer 3

您只能声明一次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>

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

3 个答案:

演示