Solution 1 :

You have to put the numArray outside the function.

or else it will get reseted whenever the addNum function is called.

like this:

//Display "Numbers Added: " 
    let numArray = [];
function displayText() {
    document.getElementById("numLabel").style.display = "block";
}

//Add the entered value into the array
function addNum() {
    let num = document.getElementById("numInput").value;
document.getElementById("numValue").innerHTML = num;
    numArray.push(num);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Numbers</title>

    <!--Bootstrap and CSS Links-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section>
        <header class="header m-2">Week 8 Assignment</header>
        <section class="row m-2">
            <label class="inputLabel">Number: <input type="number" id="numInput"></label>
        </section>
        <button class="button m-1" onclick="displayText(); addNum();">Add Number</button>
        <button class="button m-1" disabled>Calculate</button>
        <button class="button m-1">Reset</button>
    </section>

    <section>
        <div class="numLabel m-2" id="numLabel">Numbers Added: </div>
        <p class="m-2 mt-3" id="numValue"></p>
    </section>

<script src="script.js"></script>
</body>
</html>

Problem :

I am a student learning basic JS and I am trying to create a webpage that will display an array based on the numbers entered into the input box. So far I have been able to make a function that adds a single item to the array, but it does not work if you try to add a second number to the array. I am not sure if I am formatting it correctly. This is the code I have so far:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Numbers</title>

    <!--Bootstrap and CSS Links-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section>
        <header class="header m-2">Week 8 Assignment</header>
        <section class="row m-2">
            <label class="inputLabel">Number: <input type="number" id="numInput"></label>
        </section>
        <button class="button m-1" onclick="displayText(); addNum();">Add Number</button>
        <button class="button m-1" disabled>Calculate</button>
        <button class="button m-1">Reset</button>
    </section>

    <section>
        <div class="numLabel m-2" id="numLabel">Numbers Added: </div>
        <p class="m-2 mt-3" id="numValue"></p>
    </section>

<script src="script.js"></script>
</body>
</html>
JS:
//Display "Numbers Added: " 
function displayText() {
    document.getElementById("numLabel").style.display = "block";
}

//Add the entered value into the array
function addNum() {
    let num = document.getElementById("numInput").value;

    let numArray = [];
    numArray.push(document.getElementById("numValue").innerHTML = num);
}

Comments

Comment posted by ControlAltDel

see Array.splice

By