JSFiddle - React, Tailwind, and code Playground

by ClarenceDowns

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>

<body>
    Index:
    <input type='textbox' id='index' />
    <br/> Value:
    <input type='textbox' id='value' />
    <br/>
    <button onClick="fillArray()">Create an Array</button>
    <br/>
    <button onClick="insertIntoArray()">Insert into Array</button>
    <br/>
    <div id="output">

    </div>

</body>

</html>

JavaScript

var array = [];
var d = "";

 let fillArray = function() {
  clearDisplay();

  for (var i = 0; i < 100; i++) {
    array[i] = Math.floor(Math.random() * 100 + 1);
  }
  displayArray();
}

function clearDisplay() {
  d = "";

  document.getElementById("output").innerHTML = "";
}

function displayArray() {
  for (var i = 0; i < array.length - 1; i++) {
    d += i + ' : ' + array[i] + "<br/>";
  }
  document.getElementById("output").innerHTML = d;
}

function insertIntoArray() {
  clearDisplay();

  var i = parseInt(document.getElementById("index").value);

  var v = parseInt(document.getElementById("value").value);


  arry = array.splice(i, 0, v);

  displayArray();
}