我想知道如何按字母顺序对标签的内容<textarea>进行排序，然后<textarea>使用 javascript 将其输出到另一个第二个标签中。StackOverflow 上有一些与之前提出的问题类似的问题，但我认为他们的任何答案都不能应用于我下面的代码。这是我的代码：.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;}
4 回答
斯蒂芬大帝
TA贡献1827条经验 获得超8个赞
首先，我首先将元素split()的值textarea放入数组中：
//split the value on a space character
let wordsArr = document.querySelector('#input').value.split(' ');
然后对数组进行排序：
wordsArr.sort((a, b) => {
const word1 = a.toUpperCase();
const word2 = b.toUpperCase();
if (word1 < word2) {
return -1;
}
if (word2 > word1) {
return 1;
}
/* if neither of those if statements fire, that means the words are the
same and can stay in the same position */
return 0;
};
然后将数组元素连接回单个字符串，并将其设置为其他文本区域的值：
document.querySelector('#output').value = wordsArr.join(' ');
呼啦一阵风
TA贡献1802条经验 获得超6个赞
我也会从分裂开始，但我们不要重新发明世界。您可以在 4 行函数中使用 js 数组排序、toString 和替换方法
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
.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="input" type="text" placeholder="type your text here"></textarea>
<input class="button" type='button' value="alphabetize" onclick="myFunction()">
</form>
<form class="asci">
<textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea>
</form>
</div>
<script src="ascii.js"></script>
</body>
</html>
PIPIONE
TA贡献1829条经验 获得超9个赞
注册“输入”和“点击”事件以形成。为每个事件创建一个事件处理程序。
document.forms.ID.oninput = inputHandler;
document.forms.ID.onclick = clickHandler;
创建事件处理程序时，传递事件对象
function inputHandler(e) {...
定义引用的变量：
所有表单字段的 NodeList
/*
- "this" is the form tag
- .elements is a property that collects all form type tags
*/
const field = this.elements;
用户与之互动的标签
/*
- e.target property always points to the tag a user has clicked, changed,
entered data upon, etc.
*/
const input = e.target;
任何其他相关标签，例如输出
/*
- Any input, output, textarea, etc you want to access just prefix the NodeList
identifier (see first variable) to any form type tag #id or [name]
*/
const output = field.output;
接下来，定义一个条件来确定您要处理哪个标签（通常是e.target）而不是其他任何内容。通过排除其他不必要的标签，您可以完全控制做什么以及如何完成。
if (e.target.id === 'input') {...
/* OR */
if (e.target.className === 'button') {...
演示
const form = document.forms.editor;
form.oninput = copyText;
form.onclick = sortText;
function copyText(e) {
const ui = this.elements;
const inp = e.target;
const out = ui.output;
if (inp.id === 'input') {
out.value = inp.value;
}
}
function sortText(e) {
const ui = this.elements;
const btn = e.target;
const out = ui.output;
if (btn.className === "button") {
let result = out.value.split(' ').sort((a, b) => a - b);
out.value = result;
}
}
.box {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
textarea {
width: 90vw;
height: 30vw;
}
.button {
display: block;
width: 90vh;
height: 5vw;
margin: 5px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<form id="editor">
<fieldset>
<textarea id="input" placeholder="Enter a space-delimited list of items here"></textarea>
<button class="button" type='button'>Sort</button>
<textarea id="output" placeholder="Sorted list will be provided here"></textarea>
</fieldset>
</form>
</body>
</html>
潇湘沐
TA贡献1816条经验 获得超6个赞
您需要使用split()和sort()。
这是你的代码：
function myFunction() {
const input1 = document.getElementById("input");
const input2 = document.getElementById("output");
let content = input1.value; //Get its content
var array = content.split(" "); //And replace each space by a comma to make an array.
input2.value = array.sort(); //alphabetize it!
input2.value = input2.value.replace(",", " "); //Restore the spaces.
}
.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;
}
<head>
<title>alphabetical order machine</title>
</head>
<body>
<div class="con">
<form class="txt">
<textarea class="text" id="input" type="text" placeholder="type your text here"></textarea>
<input class="button" type='button' value="alphabetize" onclick="myFunction();">
</form>
<form class="asci">
<textarea class="ascii" id="output" type="text" placeholder="your alphabetized text will appear here"></textarea>
</form>
</div>
</body>
- 4 回答
- 0 关注
- 139 浏览
添加回答
举报
0/150
提交
取消