无法在两个相同功能中的一个或两个上设置 innerHTML

Question

我有两个基本相同的功能。 negIndex 函数像宣传的那样工作，没有问题，但 posIndex 函数给我错误“无法将 enterTable.innerHTML 设置为 'null'”。

我对 Javascript 还很陌生，所以它可能是显而易见的，但如果它是我迷路了。我尝试了一些不同的事情，但没有积极的结果。任何帮助将不胜感激。

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>

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

我只是在猜测你的 html 会是什么样子

// 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>