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

Question

我在一个网站自动取款机和它的主要内容管理系统的工作，但我们可以添加一个代码的html片段。我想构建一些东西，你可以输入5个名字，按下按钮后，它匹配每个名字与给定列表中的一个单词，所以输出是5对，没有任何东西应该重复。例如，将字母a-e与数字1-5配对，我想要一个随机的配对列表(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>

​