如何洗牌由用户添加的阵列中的项目并显示结果？

Question

这里的Javascript初学者，我需要给最终用户一个选项，以随机他们的库存。我创建了一个函数来存储用户的项目，但不能完全得到随机化工作的第二功能（shuffleFunction）。我知道有很多的例子摆在那里，但我需要帮助学习什么，我具体做什么错在我的第二个功能。控制台错误读取（未捕获的类型错误：shuffleFunction不在HTMLButtonElement.onclick的函数）。

这是学习的目的。

    <script type="text/javascript">
   var items = [];

   function myFunction()
   { "use strict";
         var add = document.getElementById("collector");
         items.push(document.getElementById("input").value);

    add.innerHTML = items.join('<br/>'); 
   }

var shuffleFunction = [ ];

function shuffleFunction()
    {
    while (items.length > 0) {
          let rnd = Math.floor( Math.random( ) * items.length);
          shuffleFunction.push( items[ rnd ] );
          items.splice( rnd, 1 );         // remove position from old array
          shuffle.push(document.getElementById("shuffle").value);
}
    }
console.log( "Shuffled items: " + items ); 



  </script>



    <form>

  <input id="input" type=text>
   <input type=button onclick="myFunction()" value="Add Item"/>



  <button id="shuffle" type="button" onclick="shuffleFunction()" value="Shuffle Items">Shuffle!</button>

 <div id = collector > 
  </div>

   </form> 

一旦用他们的话说，用户类型，用户可以然后点击洗牌按钮随机选择并显示阵列的结果。

Answer 1

var items = [];

function myFunction()
{
    var add = document.getElementById("collector");
    items.push(document.getElementById("input").value);
    add.innerHTML = items.join('<br/>'); 
}
function shuffleFunction()
{
	const add = document.getElementById("collector");
	add.innerHTML = items.shuffle().join('<br/>');
}
Array.prototype.shuffle = function(){
  const resultArr = []
  const realArr = JSON.parse(JSON.stringify(this));
  while(realArr.length > 0){
    resultArr.push(realArr.splice(Math.floor(Math.random() * realArr.length),1));
  }
  return resultArr;
}

<form>
   <input id="input" type=text>
   <input type=button onclick="myFunction()" value="Add Item"/>
   <button id="shuffle" type="button" onclick="shuffleFunction()" value="Shuffle Items">Shuffle!</button>
   <div id ="collector"></div>
</form>