0

Javascript beginner here, I need to give an end user an option to randomize their inventory. I created a function to store the user's items but can't quite get the second function (shuffleFunction) working for randomization. I know there are a lot of examples out there, but I need help learning what I am specifically doing wrong in my second function. The console error reads (Uncaught TypeError: shuffleFunction is not a function at HTMLButtonElement.onclick).

This is for learning purposes. 

    <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>

Once the user types in their words, the user can then hit the shuffle button to randomize and display the array's results.

haberjin
  • 55
  • 6
  • 1
    Possible duplicate of [How to randomize (shuffle) a JavaScript array?](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) – ellipsis Feb 03 '19 at 05:34
  • The problem is you have initialised the array with `const` - it can't be modified. Change to `var` or `let`. – Jack Bashford Feb 03 '19 at 05:36
  • Thank you, I tried removing the Const before but since it didn't change anything I changed it back. It will be smarter to use let in this situation though. – haberjin Feb 03 '19 at 05:42
  • @Ashay Mandwarya, Thanks for the reply. It is a similar question, but i'm having trouble getting the numbers to randomize after I get the inputs from a user and not a preset array. – haberjin Feb 03 '19 at 05:45
  • You cannot have both an array and a function named `shuffleFunction`. Did you mean `var shuffle = []` (as `shuffle` is another variable you use but don't initialise)? – Bergi Feb 03 '19 at 20:29

1 Answers1

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>
Maheer Ali
  • 35,834
  • 5
  • 42
  • 73
  • I think one of my more immediate issues is getting the shuffled result to display on my HTML page. Like how to get (document.getElementById("shuffle").innerHTML = ???). – haberjin Feb 03 '19 at 19:33
  • In which way you wanna display it to the screen. I mean list or something like that? – Maheer Ali Feb 03 '19 at 19:45
  • Yes, as a list that will shuffle their inputs whenever they click the shuffle button. I aware that my code has current errors, but I'm working on learning to use functions correctly. Thanks for the reply. – haberjin Feb 03 '19 at 19:56
  • @haberjin I have edited the code. Just add items and test by clicking shuffle. Accept answer if you are satisfied – Maheer Ali Feb 03 '19 at 20:22
  • Oh, this is awesome and more than I expected. Exactly what I needed. I'll have to compare and take notes. Thank You. – haberjin Feb 03 '19 at 21:40