Random number generation/shuffling issue

Okay so, I'm trying to create an application where when you click a button it Generates and Displays a concatenated sequence of unique Numbers between 1 and 76. I have it generating 1 -78 randomly with no dupes but I am unsure as to how I would make it so when it comes to displaying it, it displays 1 number and then increments +1 with every click.

So first click [28] second click [28, 33] and so on without duplicates. here is the code I have so far

window.onload = onclick;

function onclick() {
    document.getElementById("BtnCall").onmousedown = GenNumber;
}


function GenNumber() {
    var num = LoadNumbers(1, 76);
    num = shufflearray(num);
    for (i = 0; i < 1; i++) {
        ShowArray(num);
    }
};


function LoadNumbers(min, max) {
    var arr = [];
    for (var i = min; i <= max; i++) {
        arr.push(i);
    }
    return arr;
}

function shufflearray(input) {
    var out = [];
    while (input.length > 0) { 
        var i = Math.random() * input.length;
        var a = input.splice(i, 1);
        out.push(a);
    }

    return out;
}

function ShowArray(m) {

    for (var i = 0; i < m.length; i++) {
		document.getElementById("usednum").innerHTML += (m[i]+', ');
    }
}

Thanks for any support/help :)

needs to behave/like this https://gyazo.com/bebb7c58c402934050be8bc9be29e183

instead of this: This happens with one single click

Solution

I think you're making random number concatenation one after another logic TOO complicated with your existing code like GenNumber(), LoadNumbers() and shufflearray() method. I just post an example answer that will fulfill what you want to do as per "Need to behave like this" (If I were you then I'll try this way). By the way I've also posted an answer with your existing code also.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Generate Random Number</title>
</head>

<body>

  <p id="show_random"></p>
  <script type="text/javascript">
    var randoms = [];

    function makeid() {
      var randomnumber = Math.ceil(Math.random() * 76);
      randoms.push(randomnumber);
      //console.log(randoms);
      document.getElementById('show_random').innerHTML = randoms.join(' ');
    }
  </script>
  <input type="button" style="font-size:9pt" value="Gen Random" onclick="makeid()">
  </input>
  </form>
</body>

</html>

See it with your code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Generate Random Number</title>
</head>
<body>

<p id="usednum"></p>
<script type="text/javascript">
   
window.onload = onclick;

function onclick() {
    document.getElementById("BtnCall").onmousedown = GenNumber;
}


function GenNumber() {
    var num = LoadNumbers(1, 76);
    num = shufflearray(num);
    var single = Math.ceil(Math.random() * num.length);
    ShowArray(single); //with you existing code you're passing whole array
};


function LoadNumbers(min, max) {
    var arr = [];
    for (var i = min; i <= max; i++) {
        arr.push(i);
    }
    return arr;
}

function shufflearray(input) {
    var out = [];
    while (input.length > 0) { 
        var i = Math.random() * input.length;
        var a = input.splice(i, 1);
        out.push(a);
    }

    return out;
}

function ShowArray(m) {
   document.getElementById("usednum").innerHTML += (m + ', ');
}


</script>
<input type="button" style="font-size:9pt" value="Gen Random" id="BtnCall">
</input>
</form>
</body>
</html>