我想知道<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;
}
<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="">
</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>
有谁知道如何解决这个问题?
我也将从分裂开始,但让我们不要重塑世界。您可以在4行函数中使用js数组sort,toString和replace方法
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句