我想知道如何按字母順序對標簽的內容<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 關注
- 232 瀏覽
添加回答
舉報
0/150
提交
取消