Javascript 如何随机显示文本区域项目

我有4个文本区域项目，我想显示，但我希望他们的顺序显示为随机的。我有这些项目，但我不知道我将如何着手做这件事

<div>
    <textarea>text 1</textarea>
    <textarea>text 2</textarea>
    <textarea>text 3</textarea>
    <textarea>text 4</textarea>
</div>

文本1
文本2
文本3
文本4

首先，随机设置四个变量，然后使用document.write，或者更好地将document.getElementById（'output'）.innerHTML设置为包含文本变量的文本区域。

//无序排序
让shuffleSort=（）=>（0.5-Math.random（））；
//获取您的文本区域
让txtAreas=Array.from（document.querySelectorAll（'.container textarea'））
//定义几个网格区域
让样式=[“一”、“二”、“三”、“四”]；
//洗牌文本区域并按索引顺序添加样式
排序（shuffleSort）.forEach（（textarea，i）=>{
textarea.classList.add（样式[i]）
})

.container{
显示：网格；
网格模板区域：“一”“二”“三”“四”；
}
.一{
网格面积：1；
}
.二{
网格面积：2个；
}
.三{
网格面积：3个；
}
.4{
网格面积：4个；
}

1.
2.
3.
4.

//获取main的子级并准备一个包含其值的数组
设x=$（“#main”）.children（）；
让Beginar=[]；
对于（设y=0；y

1.
2.
3.
4.
我注意到您的标签中有反应，因此我制作了一个快速反应示例。没有状态管理，所以有点不完整，但希望你能理解


class TextArea扩展React.Component{
建造师（道具）{
超级（）
此.state={
文本：props.text | |”
}
}
变化=（e）=>{
this.setState（{text:e.target.value}）
}
render（）{
返回
}
}
类TextAreas扩展React.Component{
构造函数（）{
超级（）
此.state={
数据：[
{键：1，文本：'text 1'}，
{键：2，文本：'text 2'}，
{键：3，文本：'text 3'}，
{键：4，文本：'text 4'}
]}
}
洗牌=（）=>{
this.setState（{data:{.shuffle（this.state.data）}）
}
render（）{
返回
{this.state.data.map（txt=>
)}
洗牌
}
}
ReactDOM.render（，document.getElementById（'root'））
谢谢！这是简单易懂的。