JSFiddle - React, Tailwind, and code Playground

by jay dowling

HTML

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

<div id="output">

</div>

JavaScript

var array = []; //flobal array to hold array
var d = "";	    //Global string for output

function fillArray () {
//Call function to clear the disply values
clearDisplay();
// simple loop hard coded to 100 to set array values

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

// Call function to 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 indes 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/><br/>";
  
  //students cannot use this function, 
  //insert using built in splice function
  
  arry = array.splice(i, 0, v);
  
  //Display the array
  
  displayArray();
 
  
 }