Cannot read property of' error in javascript

Question

I have written some JavaScript code to do something when some buttons are click. However, when I click on the buttons, it returns a typeError. Uncaught TypeError: Cannot read property 'saidOrNot' of undefined.

How do I fix it? JS Code below -

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);
    }
});

Source code in GitHub Repository - https://github.com/Aaditya-Baduni/trump-statements

EDIT: Using statements = statements.splice(statementInd, 1); or statements = statements.splice(statementInd); still doesn't make the game work as expected.

EDIT 2: I have completed my project see it here - https://aaditya-baduni.github.io/games/craziest-things-said-by-trump/

Answer 1

You have to splice the array by index for only one element. The command should be like below:

statements.splice(statementInd, 1);

After that, in the decision functions, you need to check the length of the array after the splice line.

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

You can also put the length check conditions into the click event listener methods.

Answer 2

In your code in the right function and wrong function, you have this line -

statements.splice(statementInd);

This line is removing all the elements after the index. For example if your array is

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

If this isn't the output that you expected. Then you can try-

statements.splice(statementInd, 1);

This will remove the statement from the array.

Answer 3

It's because slice not removing element from your Array, it just return a new array after slicing it. For example:

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

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

So you just need to reassign statements to new array after slicing an element, like so:

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