Cannot set innerHTML on one, of two, identical functions

Question

I have two functions that are essentially identical. The negIndex function works as advertised, no problems, but the posIndex function give me the error "cannot set enterTable.innerHTML to 'null'".

I'm fairly new to Javascript so it could be something obvious, but if it is i'm lost. I've tried a few different things without positive results. Any help would be appreciated.

The HTML

<ul id="exitTable" style="list-style-type: none; display: flex; flex-direction: column; vertical-align: center"></ul>
<br>
<ul id="enterTable" style="list-style-type: none; display: flex; flex-direction: column; vertical-align: center"></ul>

The Javascript

// Put DOM elements into variables
const myForm = document.querySelector('#my-form');
const price = document.querySelector('#stockPrice');
const shares = document.querySelector('#sharesAmount');
const commission = document.querySelector('#commissionAmount');
const fee = document.querySelector('#feeAmount');
const max = document.querySelector('#maxGain');
const msg = document.querySelector('.msg');
const exitTable = document.querySelector('#exitTable');
const enterTable = document.querySelector('#enterTable');

// Listen for form submit
myForm.addEventListener('submit', onSubmit);

function onSubmit(e) {
    e.preventDefault();

    if (price.value === '' || shares.value === '') {
        // alert
        msg.classList.add('error');
        msg.innerHTML = 'Please enter required fields';

        // Remove error after 3 seconds
        setTimeout(() => msg.remove(), 3000);
    } else {
        let subTotal = price.value * shares.value;
        subTotal = subTotal.toFixed(2)
        let total = subTotal + parseFloat(commission.value);

        function popList(name) {
            let li = document.createElement('li');
            li.textContent = name;
            li.style.cssText = 'text-align: center'
            return li;
        }

        //finds the 5%-50% loss amounts based on subTotal
        function negIndex(num) {
            let negPer = -0.05;
            let negArray = [];
            let i = 0;
            exitTable.innerHTML = "";
            while (negPer >= -0.50) {
                negArray[i] = parseFloat(num * negPer).toFixed(2);
                let s = parseFloat(negPer * 100).toFixed(1) + "% " + negArray[i];
                let x = popList(s); //creating list elements
                exitTable.appendChild(x);
                i++;
                negPer += -0.05;
            }
        }

        function posIndex(num) {
            let posPer = 0.05;
            let posArray = [];
            let i = 0;
            enterTable.innerHTML = "";
            while (posPer <= 1.00) {
                posArray[i] = parseFloat(num * posPer).toFixed(2);
                let s = parseFloat(posPer * 100).toFixed(1) + "% ->" + posArray[i];
                let x = popList(s);
                enterTable.appendChild(x);
                i++;
                posPer += 0.05;
            }
        }

        posIndex(subTotal);
        negIndex(subTotal);
}

//Listen for form clear
myForm.addEventListener('reset', onReset);

function onReset() {
    price.innerHTML = "";
    shares.innerHTML = "";
    commission.innerHTML = "";
    fee.innerHTML = "";
}

Answer 1

I'm just gessing what your html could look like

// Put DOM elements into variables
const myForm = document.querySelector('#my-form');
const price = document.querySelector('#stockPrice');
const shares = document.querySelector('#sharesAmount');
const commission = document.querySelector('#commissionAmount');
const fee = document.querySelector('#feeAmount');
const max = document.querySelector('#maxGain');
const msg = document.querySelector('.msg');
const exitTable = document.querySelector('#exitTable');
const enterTable = document.querySelector('#enterTable');
let subTotal = 0;

// Listen for form submit
myForm.addEventListener('submit', onSubmit);

function onSubmit(e) {
    e.preventDefault();

    if (price.value === '' || shares.value === '') {
        // alert
        msg.classList.add('error');
        msg.innerHTML = 'Please enter required fields';

        // Remove error after 3 seconds
        setTimeout(() => {
            msg.classList.remove('error');
            msg.innerHTML = '';
        }, 3000);
    } else {
        subTotal = price.value * shares.value;
        subTotal = subTotal.toFixed(2)
    }

    posIndex(subTotal);
    negIndex(subTotal);
}

function popList(name) {
    let li = document.createElement('li');
    li.textContent = name;
    li.style.cssText = 'text-align: center'
    return li;
}

//finds the 5%-50% loss amounts based on subTotal
function negIndex(num) {
    let negPer = -0.05;
    let negArray = [];
    let i = 0;
    exitTable.innerHTML = "";
    while (negPer >= -0.50) {
        negArray[i] = parseFloat(num * negPer).toFixed(2);
        let s = parseFloat(negPer * 100).toFixed(1) + "% " + negArray[i];
        let x = popList(s); //creating list elements
        exitTable.appendChild(x);
        i++;
        negPer += -0.05;
    }
}

function posIndex(num) {
    let posPer = 0.05;
    let posArray = [];
    let i = 0;
    enterTable.innerHTML = "";
    while (posPer <= 1.00) {
        posArray[i] = parseFloat(num * posPer).toFixed(2);
        let s = parseFloat(posPer * 100).toFixed(1) + "% ->" + posArray[i];
        let x = popList(s);
        enterTable.appendChild(x);
        i++;
        posPer += 0.05;
    }
}

//Listen for form clear
myForm.addEventListener('reset', onReset);

function onReset() {
    price.innerHTML = "";
    shares.innerHTML = "";
    commission.innerHTML = "";
    fee.innerHTML = "";
}

<form id="my-form">
    <div>
        <label for="stockPrice">Stock price</label>
        <input type="number" id="stockPrice" />
    </div>
    <div>
        <label for="sharesAmount">Shares amount</label>
        <input type="number" id="sharesAmount" />
    </div>
    <div>
        <label for="commissionAmount">Commission amount</label>
        <input type="number" id="commissionAmount" />
    </div>
    <div>
        <label for="feeAmount">Fee amount</label>
        <input type="number" id="feeAmount" />
    </div>
    <div>
        <label for="maxGain">Max gain</label>
        <input type="number" id="maxGain" />
    </div>
    <div class="msg"></div>
    <button type="submit">Submit</button>
</form>
<ul id="exitTable" style="list-style-type: none; display: flex; flex-direction: column; vertical-align: middle"></ul>
<br>
<ul id="enterTable" style="list-style-type: none; display: flex; flex-direction: column; vertical-align: middle"></ul>