如何单击按钮从textarea获取所有内容，运行一个函数，然后在新的div中显示最终值？

Question

我还在学习阶段，你能给我一个解释的答案吗？

如果可能的话，如果你能在这里向我解释我做错了什么，然后告诉我更好的方法，我将不胜感激。

​

//ARROW FUNCTION
const reverseNumber = num => (num.toString().split("").reverse().join(""));



let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#output-button');
let outputAreaEl = document.querySelector('#output');


submitButtonEl.addEventListener("click", () => {
  textAreaValue = reverseNumber(textAreaEl)
  outputAreaEl.innerHTML = textAreaValue.value;
});

<form action="">
  <label for="object" title="object">JavaScript function that returns a passed string with letters in alphabetical order</label>
  <textarea id="text-area" name="object-name" id="" cols="30" rows="5"></textarea>
  <input type="button" value="RETURN" id="return-value" />
  <div id="output"></div>
</form>

​

Answer 1

首先，#output-button中没有元素。你得解决这个问题。

如果将元素本身传递给reverseNumber()，则应该将值传递给函数。

如果文本是纯文本(而不是htmlString)，我还建议您使用innerText或textContent而不是innerHTML。

演示：

​

const reverseNumber = num => (num.toString().split("").reverse().join(""));

let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#output-button');
let outputAreaEl = document.querySelector('#output');

submitButtonEl.addEventListener("click", () => {
    textAreaValue = reverseNumber(textAreaEl.value); //pass value here  
    outputAreaEl.textContent = textAreaValue; //no need to use value here
});

<form action="">
  <label for="object" title="object">JavaScript function that returns a passed string with letters in alphabetical order</label>
  <textarea id="text-area" name="object-name" id="" cols="30" rows="5"></textarea>
  <input type="button" value="RETURN" id="output-button"/>   <!--fix the id here-->
  <div id="output"></div>
</form>

​

Answer 2

首先，textarea id是不正确的，因此querySelector返回的是未定义的，并且没有附加单击事件。我已经在html中更正了按钮id。

您需要使用textAreaEl.value查找textarea文本并将其传递给reverseNumber函数。

​

//ARROW FUNCTION
const reverseNumber = num => (num.toString().split("").reverse().join(""));



let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#output-button');
let outputAreaEl = document.querySelector('#output');


submitButtonEl.addEventListener("click", () => {
    textAreaValue = reverseNumber(textAreaEl.value)  
    outputAreaEl.innerHTML=textAreaValue;
});

 <form action="">
        <label for="object" title="object">JavaScript function that reverses a number</label>
        <textarea id="text-area" name="object-name" id="" cols="30" rows="5"></textarea>
        <input type="button" value="RETURN" id="output-button"/>   
        <div id="output"></div>
    </form>

​

Answer 3

你的剧本应该是这样的

const reverseNumber = num => (num.toString().split("").reverse().join(""));
console.log(reverseNumber(54321));

let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#return-value');
let outputAreaEl = document.querySelector('#output');

submitButtonEl.addEventListener("click", () => {
    let textAreaValue = reverseNumber(textAreaEl.value);  
    outputAreaEl.innerHTML = textAreaValue;
});

首先，您的document.querySelector('#output-button')与<input type="button" value="RETURN" id="return-value"/>不匹配。

第二，您必须使用变量声明关键字来获取textAreaEl.value。