JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<div id="form-array">    
    <form>
        Index:<br>
            <input type="text" name="index" id="index" value="4"><br>
        Number:<br>
            <input type="text" name="number" id="number" value="4"><br>
    </form>
                
    <input type="submit" id="click" value="Update Array"><br><br>
    <div id="updated-array"></div>
</div>

CSS

#click {
    font-size: inherit;
    color: #FFF;
    background-color: #000;
    width: 10em;  
    height: 3em;
}

JavaScript

//create a program that will instantiate an integer array of size 1000
var array = new Array(1000);
//when 'Update Array' is clicked call myFormSubmit function
document.getElementById("form-array").onclick = function() {myFormSubmit()};

//form function called and stores form input as variables
function myFormSubmit() {
    var index_entered = document.getElementById("index").value;
    var number_entered = document.getElementById("number").value;
    
    //call array function and display it in the updated array div
    document.getElementById('updated-array').innerHTML = InsertIntoArray(array, index_entered, number_entered);
}


//You will write a function with 3 arguments. The name will be InsertIntoArray
//Argument 1 is the array 
//argument 2 is the index of where you are going to insert a new number
//argument 3 is the number to insert.
function InsertIntoArray(array, index, number) {
    //Fill each array element with a random integer between 1 and 100. 
    
    //add a number between 1 and 100 to each element in array
    // 100 gives random inclusive of 0..99
    // +1 makes inclusive of 100
    //array[index] = Math.floor((Math.random() * 100) + 1);          
    
    //accept user input as number instead of using math.random
    array[index] = number;
    
    //printing output
    var updated_array = "";
    for (i = 0; i < array.length; i++) {
        updated_array += array[i] + " = Value of array index " + array.indexOf(array[i]) + "<br>";
    }
    return document.getElementById('updated-array').innerHTML = updated_array;

}