无法读取 javascript 中“错误”的属性

如何解决无法读取 javascript 中“错误”的属性

我编写了一些 JavaScript 代码来在单击某些按钮时执行某些操作。但是，当我单击按钮时，它返回一个 typeError。未捕获的类型错误：无法读取未定义的属性“saidOrNot”。

我该如何解决？下面的 JS 代码 -

var score = 0;

var wrong_sound = new Audio("sounds/wrong.mp3");

var trumpStatements_p = document.getElementById("trump-statement-p");
var scoreBoard_p = document.getElementById("score-board-p");

var yes_btn = document.getElementById("yes-btn");
var no_btn = document.getElementById("no-btn");

// Trump Statement object
class trumpStatement {
    constructor(statement,saidOrNot) {
        this.statement = statement;
        this.saidOrNot = saidOrNot;
    }
}

// Create the Trump Statement Objects
var rocketMan = new trumpStatement("The US has great strength and patience,but if it is forced to defend itself and its allies,we will have no choice but to totally destroy North Korea.  ROCKET MAN is on a suicide mission for himself and for his regime.",true);
var wall = new trumpStatement("I would build a great wall,and nobody builds walls better than me,believe me,and I’ll build them very inexpensively,I will build a great,great wall on our southern border. And I will have Mexico pay for that wall.",true);
var whiteSupremecy = new trumpStatement("I stand back,and stand by. (while referencing white supremacists)",true);
var greatest = new trumpStatement("I’m the greatest President ever with the <em>possible</em> exception of Lincoln.",true);
var chinaLunch = new trumpStatement("China ate your lunch,Joe.",true);
var obamasDogImmigrant = new trumpStatement("Yeah,Obama had a dog. You're right. Both parties should come together to finally create a safe and lawful system of immigration.",true);

var kenyanObama = new trumpStatement("Obama was born in Kenya! Again,immigrants taking our jobs!",false);
var openAmerica = new trumpStatement("Make America Open Up Again. (in reference to Covid-19 lockdowns)",false);
var nukeKorea = new trumpStatement("If North Korea doesn’t stop their nuclear tests,for America’s security,I will have no choice but to nuke them.",false);
var trade = new trumpStatement("President Xi and I had major disagreements over trade. We are working on a trade deal and I will make sure that the deal puts AMERICA FIRST.",false);

// Store all statements in a variable
var statements = [rocketMan,wall,whiteSupremecy,greatest,chinaLunch,obamasDogImmigrant,kenyanObama,openAmerica,nukeKorea,trade];

function right(statementInd) {
    statements.splice(statementInd);
    statementIndex = Math.floor(Math.random() * statements.length);
    saidOrNot = statements[statementIndex].saidOrNot;
    statement = statements[statementIndex].statement;
    trumpStatements_p.innerHTML = statement;
    score++;
    scoreBoard_p.innerHTML = `You have got ${score}/10 correct`;

    // animation
    document.getElementsByTagName("body")[0].classList.add("right");
    setTimeout(function() {
        document.getElementsByTagName("body")[0].classList.remove("right");
    },400);
}

function wrong(statementInd) {
    statements.splice(statementInd);
    statementIndex = Math.floor(Math.random() * statements.length);
    saidOrNot = statements[statementIndex].saidOrNot;
    statement = statements[statementIndex].statement;
    trumpStatements_p.innerHTML = statement;

    // animation and sound
    document.getElementsByTagName("body")[0].classList.add("wrong");
    setTimeout(function() {
        document.getElementsByTagName("body")[0].classList.remove("wrong");
    },400);
    wrong_sound.play();
}

var statementIndex = Math.floor(Math.random() * statements.length);
var saidOrNot = statements[statementIndex].saidOrNot;
var statement = statements[statementIndex].statement;
trumpStatements_p.innerHTML = statement;

yes_btn.addEventListener("click",function() {
    if (statements[statementIndex].saidOrNot === true) {
        right(statementIndex);
    } else {
        wrong(statementIndex);
    }
});

no_btn.addEventListener("click",function() {
    if (statements[statementIndex].saidOrNot === true) {
        right(statementIndex);
    } else {
        wrong(statementIndex);
    }
});

GitHub 存储库中的源代码 - https://github.com/Aaditya-Baduni/trump-statements

编辑：使用 statements = statements.splice(statementInd,1); 或 statements = statements.splice(statementInd); 仍然不能使游戏按预期运行。

编辑 2：我已经完成了我的项目，请在此处查看 - https://aaditya-baduni.github.io/games/craziest-things-said-by-trump/

解决方法

在正确函数和错误函数的代码中，您有这一行 -

statements.splice(statementInd);

这一行删除了索引之后的所有元素。 例如，如果您的数组是

let statements = ["1","2","3"];
statements.splice(1); //statments = ["1"]; 
//It removed all the elements after the index 1

如果这不是您期望的输出。那你可以试试-

statements.splice(statementInd,1);

这将从数组中删除语句。

,

这是因为切片没有从数组中删除元素，它只是在切片后返回一个新数组。例如：

a = [1,3,4]
a.slice(1);
console.log(a); // [1,4]

a = a.slice(1);
console.log(a); // [3,4]

所以你只需要在切片一个元素后将 statements 重新分配给新数组，就像这样：

function wrong(statementInd) {
    statements = statements.splice(statementInd);
    statementIndex = Math.floor(Math.random() * statements.length);

,

您必须只为一个元素按索引拼接数组。命令应如下所示：

statements.splice(statementInd,1);

之后，在决策函数中，需要检查拼接线后数组的长度。

if (statements !== null && statements.length > 0) {
   ...
}

您也可以将长度检查条件放入点击事件侦听器方法中。