I'd successfully obtain arbitrary numbers from an input field while utilizing a callback function on the HTML side which eventually passed the original numbers down to an Array constructor. Inside my function, I've reassigned the document.getElementById("text1").value that called the original numbers to a variable and a number representing a 0 index that leads to the first index within an Array constructor. The issue is, after pushing original numbers to arrayAbove (an empty array) I was not able to select the original numbers by index to reuse them later in a conditional statement. I've used a for loop to iterate the arrayAbove array and had no luck with this approach. I'm presuming the issue lies within the Array() constructor, the format inside the inspection tool displays an empty array with sequential indexes underneath the empty array, nothing I've observed before.

Any reason why? Hope this all makes sense.

index.html

</div>  
  <input placeholder="Enter Limit" type="text" id="text1"></input>
  <input   type="button" id="stopLoss" value="Add" onclick="add_element_to_array()"><input>
  <input type="button" id="button2" value="Display" onclick="display_array();"> 
  </input>
  <div id="Result"></div> 
</div>

JS:

bot.Js
var x = 0
var stopLoss = Array();
let arrayAbove = [] 

var arrName = new Array()

async function add_element_to_array(){

    stopLoss[x] = document.getElementById("text1").value;
    arrayAbove.push(parseFloat(stopLoss[x].replace(/[a-z]/i, '')))
    alert("Element:" + stopLoss[x] + "Added at index" + x);
    x++;
    document.getElementById("stopLoss").value = "";


    // console.log(tokenAmount)
}
function display_array() {
    var e = "<hr/>";

    for (var y = 0; y < stopLoss.length; y++) {
        e += "Element" + y + " = " + stopLoss[y] + "<br/>"

    }
    document.getElementById("Result").innerHTML = e;
}
console.log(arrayAbove)
console.log(arrName)