Making a true of false quiz. Everything seems to work except the function to change the text inside an element isnt working on click.
<main>
<h1>Test</h1>
<div class = "container">
<div id = "question">
</div>
</br>
<input class="button" id="btnTrue" type="button" value="true"/>
<input class="button" id="btnFlase" type="button" value="false"/>
</div>
</div>
</main>
function questionIndex() {
document.getElementById("question").innerHTML = question;
return console.log(currentItemIndex);
}
const questions = [
["questionOne", "false"],
["questionTwo", "true"],
["questionThree", "true"],
["questionFour", "false"]
];
let points = 0;
let currentItemIndex = 0;
let question = questions[currentItemIndex][0];
let answer = questions[currentItemIndex][1];
const btn = document.getElementsByClassName("button");
questionIndex();
btn.addEventListener('click', event => {
if (event.target.value === answer) {
console.log("Correct");
points++
currentItemIndex++;
console.log(points);
questionIndex();
} else {
console.log("Wrong");
currentItemIndex++;
console.log(points);
questionIndex();
}
}
);