What alternative can I use for onClick in my JavaScript quiz?

After working very hard on a JavaScript quiz, I found out (cause of my own stupidity) that I cannot use JavaScript in HTML (in this case that would mean not using the onclick function). We would have to use id's and classes, but onClick is not allowed. Since I am a beginner in JavaScript, I would not know how I could code this without using onClick. I could use a addEventListener pressing the right button, but how would I let it know what question the user is on and which answer is right if let the questions and anwsers be read out of arrays.

Please take a look at my code down below, I made some comments what functions do. Please notice that I suffer from PDD/NOS, so I might not be able to word what I mean properly or understand what some of you guys are saying. Thank you for understanding.

var buttonA = document.getElementById('buttonA'); //This is a variable to the buttons
var buttonB = document.getElementById('buttonB');
var buttonC = document.getElementById('buttonC');
var buttonD = document.getElementById('buttonD');
var quizQuestionDesign = document.getElementsByClassName('btn-quizquestiondesign'); //Class for all buttons for the design
var answerOutput = document.getElementById('checkedAnwser');
var questions = ["What does CSS stand for?", "Which from these options cannot be used in a variable name"];
var currentQuestion = document.getElementById('question');
var scoreDisplay = document.getElementById('scoreDisplay');
var nextButtonDisplay = document.getElementById('nextButton');
var questionCount = 1; //the question count begins here
var scoreCounter = 0; //We count the score beginning from the value 0
var questionImage = document.getElementById('questionImage'); //Images or gifs to make the quiz entertaining
var choice1 = ["<button class=btn-quizquestiondesign style=cursor:pointer onclick=question1Incorrect()>Central Styling Systematic</button>",
    "<button class=btn-quizquestiondesign style=cursor:pointer onclick=question2Correct()>Hashtags</button>"
];
var choice2 = ["<button class=btn-quizquestiondesign style=cursor:pointer onclick=question1Correct()>Cascading Style Sheet</button>",
    "<button class=btn-quizquestiondesign style=cursor:pointer onclick=question2Incorrect()>Underscores</button>"
];
var choice3 = ["<button class=btn-quizquestiondesign style=cursor:pointer onclick=question1Incorrect()>Central Structured System</button>",
    "<button class=btn-quizquestiondesign style=cursor:pointer onclick=question2Incorrect()>Letters</button>"
];
var choice4 = ["<button class=btn-quizquestiondesign style=cursor:pointer onclick=question1Incorrect()>Caring Style Sheet</button>",
    "<button class=btn-quizquestiondesign style=cursor:pointer onclick=question2Incorrect>Numbers</button>"
];
var correctFeedback = ["Wow you're smart", "Right!"];
var negativeFeedback = ["Too bad", "Nope"];

function addButtonActions() {
    var startButton = document.getElementById('button-start');
    var questionsButton = document.getElementById('button-questions');

    startButton.addEventListener("click", function() {
        showStartPage();
    });
    questionsButton.addEventListener("click", function() {
        showQuestionsPage();
        firstQuestionDisplay(); 
        startButton.style.display = 'none';
        questionsButton.style.display = 'none'; //If the start and GENERAL question for info and stuff will disappear, so people cannot cheat.
    });

}

function firstQuestionDisplay() {
    currentQuestion.innerHTML = "Question " + (questionCount) + ": " + questions[0]; //With this I show what the current question is
    questionImage .innerHTML = "<img src=\"https://lenadesign.org/wp-content/uploads/2019/12/untitled7-1.gif?w=580\" width=\"300px\" height=\"150px\">";
    // I use a GIF to keep it entertaining
    buttonA.innerHTML = "A. " + choice1[0]; //I let the questions take the choices based on the arrays
    buttonB.innerHTML = "B. " + choice2[0];
    buttonC.innerHTML = "C. " + choice3[0];
    buttonD.innerHTML = "D. " + choice4[0];
    scoreDisplay.innerHTML = "Current score: " + (scoreCounter) + " of 10 points";
}

function question1Correct() {
    scoreCounter++; //If you clicked on the correct button, increment it/Higher the score with 1 point
    gecheckteAntwoord.innerHTML = "<h2 id=colorCorrect>" + correctFeedback[0] + "Current score: " + scoreCounter + " of 10 points" + "</h2>";
    currentQuestion.innerHTML = ""; //With this I say, do not display the button anymore
    questionImage.innerHTML = "<img src=\"https://thumbs.gfycat.com/ElatedGlamorousAmericanindianhorse-size_restricted.gif\" width=\"300px\" height=\"150px\">";
    buttonA.innerHTML = "";
    buttonB.innerHTML = "<h4> You chose for: </h4>" + "<button class=checkBtnDesign>Cascading Style Sheet</button>"; //display of the right question
    buttonB.style.backgroundColor = "green";
    buttonC.innerHTML = "";
    buttonD.innerHTML = "";
    nextButtonDisplay.innerHTML = "<button class=btn-quizquestiondesign style=cursor:pointer onclick=secondQuestionDisplay()>Go to the next question</button>";
    scoreDisplay.innerHTML = "Current score: " + (scoreCounter) + " of 10 points";
}

function question1Incorrect() { //Function if the first question gets anwsered wrong
    answerOutput.innerHTML = "<h2 id=colorIncorrect>" + negativeFeedback[0] + " Current score: " + scoreCounter + " of 10 points" + "</h2>";
    currentQuestion.innerHTML = "";
    questionImage.innerHTML = "<img src=\"https://thumbs.gfycat.com/BruisedElementaryBedlingtonterrier-size_restricted.gif\" width=\"300px\" height=\"150px\">";
    buttonA.innerHTML = "";
    buttonB.innerHTML = "<h4> Het juiste antwoord is: </h4>" + "<button class=checkBtnDesign>Cascading Style Sheet</button>";
    buttonB.style.backgroundColor = "green";
    buttonC.innerHTML = "";
    buttonD.innerHTML = "";
    scoreDisplay.innerHTML = "Current score: " + (scoreCounter) + " of 10 points";
    nextButtonDisplay.innerHTML = "<button class=btn-quizquestiondesign style=cursor:pointer onclick=secondQuestionDisplay()>Go to the next question</button>";
}

function secondQuestionDisplay() {
    questionCount++;
    answerOutput.innerHTML = "";
    currentQuestion.innerHTML = "Question " + (questionCount) + ": " + questions[1];
    questionImage.innerHTML = "<img src=\"https://thehustle.co/wp-content/uploads/2019/10/header-1.gif\" width=\"300px\" height=\"150px\">";
    buttonA.innerHTML = "A. " + choice1[1];
    buttonB.style.backgroundColor = "";
    buttonB.innerHTML = "B. " + choice2[1];
    buttonC.innerHTML = "C. " + choice3[1];
    buttonD.innerHTML = "D. " + choice4[1];
    nextButtonDisplay.innerHTML = "";
    scoreDisplay.innerHTML = "Current score: " + (scoreCounter) + " of 10 points";
}

function question2Correct() {
    scoreCounter++;
    answerOutput.innerHTML = "<h2 id=colorCorrect>" + correctFeedback[1] + "Current score: " + scoreCounter + " of 10 points" + "</h2>";
    currentQuestion.innerHTML = "";
    questionImage.innerHTML = "<img src=\"https://media0.giphy.com/media/Y42vmMOOa5CiTGkOto/giphy.gif\" width=\"300px\" height=\"150px\">";
    buttonA.innerHTML = "<button class=checkBtnDesign ()>Hashtags</button>";
    buttonB.innerHTML = "";
    buttonA.style.backgroundColor = "green";
    buttonC.innerHTML = "";
    buttonD.innerHTML = "";
    scoreDisplay.innerHTML = "Current score: " + (scoreCounter) + " of 10 points";
    nextButtonDisplay.innerHTML = "<button class=btn-quizquestiondesign style=cursor:pointer onclick=thirdQuestionDisplay()>Go to the next question</button>";
}

function question2Incorrect() {
    answerOutput.innerHTML = "<h2 id=colorIncorrect>" + negativeFeedback[1] + "Current score: " + scoreCounter + " of 10 points" + "</h2>";
    currentQuestion.innerHTML = "";
    questionImage.innerHTML = "<img src=\"https://media0.giphy.com/media/26BGATx4qFzThYJnG/giphy.gif\" width=\"300px\" height=\"150px\">";
    buttonA.innerHTML = "";
    buttonB.innerHTML = "<h4> The right answer is: </h4>" + "<button class=checkBtnDesign ()>Hashtags</button>";
    buttonB.style.backgroundColor = "green";
    buttonC.innerHTML = "";
    buttonD.innerHTML = "";
    scoreDisplay.innerHTML = "Current score: " + (scoreCounter) + " of 10 points";
    nextButtonDisplay.innerHTML = "<button class=btn-quizquestiondesign style=cursor:pointer onclick=thirdQuestionDisplay()>Go to the next question</button>";
}
/**
 * Hide all pages
 */
function hideAllPages() {
    var startPage = document.getElementById('page-start');
    var questionsPage = document.getElementById('page-questions');

    startPage.style.display = 'none';
    questionsPage.style.display = 'none';
}

/**
 * Show start page
 */
function showStartPage() {
    var page = document.getElementById('page-start');

    hideAllPages();

    page.style.display = 'block';

    console.info('Je bent nu op de startpagina');
}

/**
 * Show questions page
 */
function showQuestionsPage() {
    var page = document.getElementById('page-questions');

    hideAllPages();

    page.style.display = 'block';

    console.info('Je bent nu op de vragenpagina');
}


// Initialize
addButtonActions();
showStartPage();