设置innerHTML时出现控制台错误，请求技术排查协助

AI 小北

2026-8-8

在线答题测验控制台错误排查与修复

问题描述

quiz.js:121 Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')
at pytanie (quiz.js:121:28)
at czas (quiz.js:24:5)
at onload (quiz2.html:9:23)

开发在线答题测验时遇到上述控制台错误，已尝试排查3天仍未解决。核心需求是为页面中id为p1、p2、p3、p4的元素分配不同的随机问题，同时消除该错误。曾尝试修改元素id、重建页面结构均无效；移除代码中的[j]可消除错误，但会导致所有元素分配相同问题。

相关代码

JavaScript代码

function czas()
{
    var i = 59;
    var min = 5;
    window.myinterval = setInterval(function() {
        document.getElementById('czas').innerHTML = "Pozostały czas: " + min + ": " + i;

        if(i == 0 && min == 0)
        {
            clearInterval(myinterval);
            getwyniki();
        }
        else
        {
            i--;
            if(i == 0 && min > 0)
            {
                i = 1;
                min--;
            }
        }
    }, 3000);
    pytanie();
}

function getwyniki() {
    clearInterval(myinterval);
    var amountCorrect = 0;
    
    for(var i = 0; i <= 5; i++)
    {
        var radiosname = document.getElementsByName('pytanie' + i);
    for(var j = 0; j < radiosname.length; j++)
    {
        var radiosvalue = radiosname[j];
        if(radiosvalue.checked){
            if(radiosvalue.value == 't')
            {
            amountCorrect++;
            radiosvalue.nextSibling.style.color = "green";
        }
        else
        {
            radiosvalue.nextSibling.style.color = "red";
        }
    }
    else
    {
        radiosvalue.nextSibling.style.color = "";
    }
}
}
if(amountCorrect <= 10 && amountCorrect >= 8)
{
    document.getElementById('ocena').innerHTML = ("Twoja ocena to: " + 5);
}
if(amountCorrect == 7)
{
    document.getElementById('ocena').innerHTML = ("Twoja ocena to: " + 4);
}
if(amountCorrect == 6)
{
    document.getElementById('ocena').innerHTML = ("Twoja ocena to: " + 3);
}
if(amountCorrect == 5)
{
    document.getElementById('ocena').innerHTML = ("Twoja ocena to: " + 2);
}
if(amountCorrect < 5)
{
    document.getElementById('ocena').innerHTML = ("Twoja ocena to: " + 1);
}
document.getElementById('wyniki').innerHTML = "Poprawnie udzielone odpowiedzi: " + amountCorrect + "<br>" + "<h3>dobrze odpowiedzi były to:<br> 1.a <br> 2.c<br> 3.d<br> 4.a</h3>";
}


function pytanie()
{
    var pytanie = ["pytanie 1", "pytanie 2", "pytanie 3", "pytanie 4", "pytanie 5", "pytanie 6", "pytanie 7", "pytanie 8", "pytanie 9", "pytanie 10",];
    var ask = pytanie.slice();
    var tmpArray =[0];
    var pname = [];
    for(var i = 0; i <= 5; i++)
    {
    //document.getElementById('p1').innerHTML = "sda";
    //console.log('i :' +i);
    var tmp = i+1;
    if (tmp < 5)
    {
    pname[i] = document.getElementById('p' + tmp);
    console.log(pname[i]);
    }
    if (i == 0)
    {
        tmpArray[0] = Math.floor(Math.random() * ask.length);
    }
    else
    {
        do
        {
            var flag = false;
            var liczba = Math.floor(Math.random() * ask.length);
            for(var j = 0; j < tmpArray.length;j++)
            {
                console.log("liczba: " + liczba + "ar: " + tmpArray[j]);
                if (liczba == tmpArray[j])
                    flag = true;
            }

        }while(flag == true);

        tmpArray.push(liczba);

    }
    }
    for(var j = 0; j < pytanie.length; j++)
    {
        console.log('tmp: ' + tmpArray[j]);
        //console.clear();
        pname[j].innerHTML = pytanie[tmpArray[j]];
        console.log('pname: ' + pname[j]);
    }
}

HTML代码

<p id="p1"></p>
    <input type="radio" name="pytanie1" value="t"><span>a)</span>
    <input type="radio" name="pytanie1" value="f"><span>b)</span>
    <input type="radio" name="pytanie1" value="f"><span>c)</span>
    <input type="radio" name="pytanie1" value="f"><span>d)</span>
    <h3>Pytanie 2</h3>

页面中另有3个类似结构区块，对应id为p2、p3、p4。

错误原因分析

错误直接触发点在pytanie()函数的最后一个循环：

for(var j = 0; j < pytanie.length; j++)
{
    pname[j].innerHTML = pytanie[tmpArray[j]];
}

pytanie.length为10，但pname数组仅初始化了索引0-3（对应p1-p4，因为循环中if (tmp < 5)才赋值，tmp=i+1，i从0到5时仅tmp=1-4满足条件）
当j>=4时，pname[j]为undefined，设置其innerHTML就会抛出TypeError
同时tmpArray最终生成了6个随机索引（i从0到5循环），远超需要的4个，属于冗余逻辑

修复方案

修改pytanie()函数，调整循环范围，确保逻辑与需求匹配：

function pytanie()
{
    var pytanie = ["pytanie 1", "pytanie 2", "pytanie 3", "pytanie 4", "pytanie 5", "pytanie 6", "pytanie 7", "pytanie 8", "pytanie 9", "pytanie 10"];
    var tmpArray = [];
    var pname = [];
    // 仅处理p1-p4四个元素
    for(var i = 0; i < 4; i++)
    {
        var tmp = i+1;
        pname[i] = document.getElementById('p' + tmp);
        console.log(pname[i]);
        // 生成不重复的随机索引
        do
        {
            var flag = false;
            var liczba = Math.floor(Math.random() * pytanie.length);
            for(var j = 0; j < tmpArray.length;j++)
            {
                if (liczba == tmpArray[j])
                    flag = true;
            }
        }while(flag == true);
        tmpArray.push(liczba);
    }
    // 循环4次，对应p1-p4赋值
    for(var j = 0; j < 4; j++)
    {
        console.log('tmp: ' + tmpArray[j]);
        pname[j].innerHTML = pytanie[tmpArray[j]];
        console.log('pname: ' + pname[j]);
    }
}

关键修改点：

第一个循环从i <=5改为i <4，仅初始化p1-p4对应的元素，避免生成冗余索引和空数组项
合并随机索引生成逻辑，去掉单独处理i=0的分支，简化代码
最后一个循环范围改为j <4，确保只访问pname中已初始化的有效元素

另外，建议同步调整getwyniki()中的循环范围为i <4，避免访问不存在的pytanie5、pytanie6元素，减少潜在问题。

内容的提问来源于stack exchange，提问作者mr.pancake

设置innerHTML时出现控制台错误，请求技术排查协助

问题描述 #

相关代码 #