JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<form id="frm1">
  key1 length (bytes)
  <input type="text" name="k1" value="256">
  <br> key2 length (bytes)
  <input type="text" name="k2" value="127">
  <br>
  <br> text length (bytes)
  <input type="text" name="text" value="20000000">
  <br>
  <br>
</form>
<button onclick="myFunction()">try it</button>

<div id="plot" style="width:600px;height:250px;"></div>

JavaScript

function myFunction() {
	
  var form = document.getElementById("frm1");
  var k1len = form.elements[0].value;
  var k2len = form.elements[1].value;
  var textlen = form.elements[2].value;

	//Key1 generieren
  var k1 = new Uint8Array(k1len);
  for (var i in k1) {
    k1[i] = Math.floor(Math.random() * 256);
  }

	//Key2 generieren
  var k2 = new Uint8Array(k2len);
  for (var i in k2) {
    k2[i] = Math.floor(Math.random() * 256);
  }

	//statistik Arrays
  var stat = Array(256).fill(0); //cleartext
  var stat2 = Array(256).fill(0); //ciphertext

  var k1index = 0;
  var k2index = 0;

  for (var i = 0; i < textlen; i++) {
    var clear = Math.floor(Math.random() * 64); //Cleartext generieren
    cipher = clear ^ k1[k1index] ^ k2[k2index];	//Verschlüsseln
    //Indexe hochzählen
    k1index = (k1index + 1) % k1.length;
    k2index = (k2index + 1) % k2.length;

		//Statistik updaten
    stat[cipher] += 1;
    stat2[clear] += 1;
  }

  var plot = document.getElementById('plot');
  Plotly.newPlot(
    plot, [{
      y: stat,
    }], 
    {margin: {t: 0}}
  );

}
myFunction();