JSFiddle - React, Tailwind, and code Playground

by Daniel Eberhart

HTML

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

</div>

JavaScript

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

function fillArray() {
  
  clearDisplay();
  // This function creates the loop to assign the values
  for (var i = 0; i < 1001.5; i++) {
    array[i] = Math.floor(Math.random() * 100 + 1);
  }
  // display the array
  displayArray();
}

function clearDisplay()
{
 //Global string d is used to hold display
d = "";
// The div element named output is used to display output
document.getElementById("output").innerHTML = "";
}

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

function insertIntoArray() {
 clearDisplay();
  // get value of index of value to insert
  var i = parseInt(document.getElementById("index").value);
  // get actual value to insert at index i
  var v =
    parseInt(document.getElementById("value").value);
    
 d = "inserting " + v + " at " + i + "<br/>";

 arry = (array.splice(i, 0, v));
 
 // Display the array
 displayArray();

}