输入 5 个名称，并将每个名称与列表中的一个唯一项目随机配对

Question

我正在开发一个网站 atm，它主要是 CMS，但我们可以用代码添加一个 html 段。我想构建一些您可以输入 5 个名称的东西，按下按钮后，它将每个名称与给定列表中的单词匹配，因此输出是 5 对，没有什么应该加倍。例如，用数字 1-5 排列字母 a-e，我想要一个随机的配对列表(a1，b3，c4，d2，e5/a2，b1，c3，d5，e4...等(但是没有字母或数字可以在同一行中出现两次。因此，您输入 5 个名称并按下一个按钮即可获得配对的随机列表，是否可能，如果是，我该怎么做。

提前谢谢。

寻求指导的新手

Answer 1

const otherList = [
`task 1`,
`task 2`,
`task 3`,
`task 4`,
`taxk 5`,
];
$('form').on('submit', function(e) {
e.preventDefault();
const names = [...document.querySelectorAll('input')].map(x => x.value);
const tasks = shuffleArray(otherList);

$('output').html(
names.map((n, idx) => `${n} => ${tasks[idx]}`).join('<br />')
);
});
function shuffleArray(inputArray) {
const array = [...inputArray];
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" class="name" placeholder="Name 1" required value="Example 1" /> <br />
<input type="text" class="name" placeholder="Name 2" required value="Example 2" /> <br />
<input type="text" class="name" placeholder="Name 3" required value="Example 3" /> <br />
<input type="text" class="name" placeholder="Name 4" required value="Example 4" /> <br />
<input type="text" class="name" placeholder="Name 5" required value="Example 5" /> <br />
<br />
<button type="submit">Go</button>
<br /><br />
</form>
<output></output>