点击提交按钮后HTML表格未更新，报TypeError错误求排查

问题场景与报错 #

有两个同文件夹下的HTML文件：一个包含待填充的表格，另一个有提交弹窗（含输入框和提交按钮）。点击提交按钮后表格无变化，控制台抛出错误：

Uncaught TypeError: Cannot read properties of null (reading 'insertRow')
    at addBet (app.js:22:24)
    at HTMLButtonElement.onclick (bet-page.html:103:67)

用户提供的核心代码 #

表格所在HTML片段

<table class="tbl-upcoming">
    <thead>
        <th>Game</th>
        <th>Pick</th>
        <th>Odds</th>
        <th>Confidence</th>
    </thead>
    <tbody>
    <!--JAVASCRIPT FUNCTION FILLS OUT TABLE-->
    </tbody>
</table>

提交弹窗HTML片段

<div class="popup-content">
    <h2>My Bet</h2>
    <div class="content-line">
        <span>Pick:</span>
        <p class="choice" id="bet-choice"></p>
    </div>
    <div id="choice-odds" class="content-line">
        <span>Odds:</span>
        <input type="text" class="choice" id="odds-choice">
    </div>
    <div id="choice-conf" class="content-line">
        <span>Confidence (1-10):</span>
        <input type="number" class="choice" id="conf-choice" min="0" max="10">
    </div>
    <button class="close-btn" onclick="togglePopup()">&times;</button>
    <button class="submit-btn" onclick="addBet()">Submit</button>
</div>

原JavaScript代码

var list1 = [];
var list2 = [];
var list3 = [];
var n = 1;
var x = 0;

function addBet() {
    var betChoice = document.getElementById("bet-choice").innerHTML;
    var oddsChoice = document.getElementById("odds-choice").innerHTML;
    var confChoice = document.getElementById("conf-choice").innerHTML;

    document.getElementById("popup-1").classList.toggle("active");

    var table = document.querySelector('.tbl-upcoming');
    var newRow = table.insertRow(n);

    list1[x] = betChoice;
    list2[x] = oddsChoice;
    list3[x] = confChoice;
    var cell1 = newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);
    cell1.innerHTML = list1[x];
    cell2.innerHTML = list2[x];
    cell3.innerHTML = list3[x];

    n++;
    x++;
}

错误原因拆解 #

1. 跨HTML文件DOM访问限制：每个HTML文件是独立的浏览器文档上下文，提交页面的JavaScript无法直接访问另一个HTML文件中的DOM元素（比如.tbl-upcoming表格），所以document.querySelector('.tbl-upcoming')返回null，调用insertRow时触发类型错误。
2. 输入值获取方式错误：input标签的用户输入内容存储在.value属性中，而非.innerHTML（.innerHTML用于获取元素内部的HTML结构），原代码中oddsChoice和confChoice会获取到空值。
3. 表格行插入位置不规范：直接在<table>上调用insertRow会将行插入到表格的所有行（包括表头行）之后，正确的做法是往<tbody>中插入行，保证表格结构合规。
4. 列数不匹配：表格有4列，但原代码只插入了3个单元格，缺少Game列的内容。

解决方案（基于LocalStorage实现跨页面数据传递） #

因为两个HTML文件同源（同文件夹），可以利用LocalStorage存储提交的数据，表格页面监听存储变化并自动填充。

1. 修改提交页面的JavaScript #

function addBet() {
    // 修正：用正确方式获取输入内容
    var betChoice = document.getElementById("bet-choice").textContent;
    var oddsChoice = document.getElementById("odds-choice").value;
    var confChoice = document.getElementById("conf-choice").value;

    // 基础输入验证
    if (!oddsChoice || !confChoice) {
        alert("请填写完整的赔率和信心值");
        return;
    }

    // 从LocalStorage获取已有投注数据，无数据则初始化空数组
    let bets = JSON.parse(localStorage.getItem('bets')) || [];
    // 添加新投注（Game字段可根据需求补充值）
    bets.push({
        game: "",
        pick: betChoice,
        odds: oddsChoice,
        confidence: confChoice
    });
    // 将更新后的数据存回LocalStorage
    localStorage.setItem('bets', JSON.stringify(bets));

    // 关闭弹窗
    document.getElementById("popup-1").classList.toggle("active");
    alert("投注已保存，请切换到表格页面查看");
}

2. 表格页面添加JavaScript（放在表格所在HTML中） #

// 页面加载时自动填充表格
window.addEventListener('load', fillTable);

// 监听LocalStorage变化，实时更新表格
window.addEventListener('storage', function(e) {
    if (e.key === 'bets') {
        fillTable();
    }
});

function fillTable() {
    let bets = JSON.parse(localStorage.getItem('bets')) || [];
    let tbody = document.querySelector('.tbl-upcoming tbody');
    // 清空现有内容避免重复填充
    tbody.innerHTML = '';

    // 遍历投注数据，插入表格行
    bets.forEach(bet => {
        let newRow = tbody.insertRow();
        // 创建4个单元格对应表格列
        let cellGame = newRow.insertCell(0);
        let cellPick = newRow.insertCell(1);
        let cellOdds = newRow.insertCell(2);
        let cellConf = newRow.insertCell(3);

        cellGame.textContent = bet.game || "未指定";
        cellPick.textContent = bet.pick;
        cellOdds.textContent = bet.odds;
        cellConf.textContent = bet.confidence;
    });
}

额外优化建议 #

• 用对象数组替代单独的list1/list2/list3，代码更易维护和扩展。
• 可添加更多输入验证逻辑（比如信心值是否在1-10范围内）。
• 如果需要两个页面同时展示，也可以用iframe嵌入的方式，但LocalStorage方案更灵活。

内容的提问来源于stack exchange，提问作者Caleb Killebrew