What happens is that I was testing my quiz this code but it turns out that it reaches the final part of quiz when I click on the button to see results, and in the chrome console I get an error really I do not know how to solve it I am new to this programming, and I have very little experience excuse me if suddenly my code has unpleasant things, I thank you a lot, this is the error
Uncaught TypeError: Can not read property 'title' of undefined at arrays (index.js: 93) at HTMLButtonElement. (index.js: 175)
var fill= [{
"title":"QUESTION 1",
"question": "The first mechanical computer designed by charles was called ?",
"option1": "Abacus",
"option2": "Processor",
"option3": "System",
"option4": "truue",
"answer": "1"
}, {
"title":"QUESTION 2",
"question": "Which of the following is the most powerful type of computter",
"option1": "Supermicro",
"option2": "Supercomputer",
"option3": "Superconductor",
"option4": "Megaframe",
"answer": "2"
},
{
"title":"QUESTION 3",
"question": "The first mechanical computer designed by charles was called ?",
"option1": "Abacus",
"option2": "Processor",
"option3": "System",
"option4": "truue",
"answer": "3"
}, {
"title":"QUESTION 4",
"question": "Which of the following is the most powerful type of compuuter",
"option1": "Supermicro",
"option2": "Supercomputer",
"option3": "Superconductor",
"option4": "Megaframe",
"answer": "1"
},
{
"title":"QUESTION 5",
"question": "Which of the following is the most powerful type of compuuter",
"option1": "Supermicro",
"option2": "Supercomputer",
"option3": "Superconductor",
"option4": "Megaframe",
"answer": "1"
}
]
/*this remove the the start of quiz and change color to principal contain*/
//variables contain
//
let body = document.getElementsByTagName('body')[0];
let first = document.getElementById("first");
let contenedor = document.getElementsByClassName("contenedor")[0];
let question = document.getElementsByClassName("question")[0];
let title = document.getElementById("title");
let paragraph = document.getElementById("redact");
let option1 = document.getElementById("option1");
let option2 = document.getElementById("option2");
let option3 = document.getElementById("option3");
let option4 = document.getElementById("option4");
let message = document.getElementById("message");
let button = document.getElementById("start");
let check = document.getElementById("check");
let next = document.getElementById("next");
let input = document.querySelectorAll('.inputs input[type="radio"]');
let actualQuestion = 0;
let points = 0;
let numQuestions = fill.length;
body.addEventListener('load',start(),false);
function start(){
question.style.display = 'none';
// listener button
button.addEventListener('click',function(){
first.style.display = 'none';
contenedor.style.background = '#FFA54F';
question.style.display = 'block';
next.disabled=true;
});
}
function arrays(index){
let quest= fill[index];
title.textContent= quest.title;
paragraph.textContent= quest.question;
option1.textContent= quest.option1;
option2.textContent= quest.option2;
option3.textContent= quest.option3;
option4.textContent= quest.option4;
}
function nextQuestion(){
let choose = document.querySelector('input[type=radio]:checked');
let imageCorrect = document.getElementById("correct");
let imageWrong= document.getElementById("wrong");
if(!choose){
message.style.display = 'block';
message.textContent= "Please answer the question";
message.style.marginTop="20px";
message.style.fontSize= "0.8em";
}
let value = choose.value;
if(fill[actualQuestion].answer==value){
imageCorrect.style.display="block";
disabledInputs()
points+=20;
}else{
imageWrong.style.display = 'block';
disabledInputs()
}
if((choose.checked=true)){
message.style.display ="none";
next.disabled=false;
}
choose.checked=false;
++actualQuestion;
if(actualQuestion==numQuestions){
next.textContent="Result";
next.addEventListener("click",function(){
let result = document.getElementById("result");
let score = document.getElementById("score");
question.style.display = 'none';
contenedor.style.background="#FFAE75";
result.style.display="block";
score.textContent="Your score "+points;
})
}
next.addEventListener('click',function(){
next.disabled=true;
imageWrong.style.display="none";
imageCorrect.style.display="none";
activeInputs()
arrays(actualQuestion);
})
}
function disabledInputs(){
for(let i=0 ; i<input.length;i++){
input[i].disabled=true;
}
}
function activeInputs(){
for(let i=0 ; i<input.length;i++){
input[i].disabled=false;
}
}
arrays(actualQuestion);
check.addEventListener('click',nextQuestion)@import url('https://fonts.googleapis.com/css?family=Rock+Salt|VT323');
h1{
font-family: 'Rock Salt', cursive;
font-size: 3em;
font-weight: bold;
text-align: center;
background: -webkit-linear-gradient(top, #E5A46A, grey);
margin: 0;
margin-bottom: 50px;
padding: 20px 10px;
}
h2{
font-weight: bold;
font-size: 3em;
margin-bottom: 20px;
}
.contenedor{
font-family: 'VT323', monospace;
display: block;
border: 4px solid black;
max-width: 500px;
margin: 0 auto;
text-align: center;
background: #FF7163;
padding: 40px;
outline: 4px dotted black;
outline-offset: 10px;
}
.introduction{
font-size: 1.5em;
line-height: 25px;
margin-bottom: 20px;
}
h3{
font-weight: bold;
font-size: 2em;
margin-bottom: 30px;
}
button{
width: 100px;
}
.question,#score{
font-size: 1.5em;
}
.inputs{
text-align: left;
font-size: 0.8em;
}
label{
margin-left: 10px;
}
input[type='radio']{
margin-left: 60px;
}
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -3px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #4F8ABF;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
.image{
max-width: 80px;
margin-top: 50px;
}
.correct, .wrong,.result{
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Quiz Game</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="row">
<div class="col">
<h1>Quiz Game</h1>
</div>
</header><!-- /header -->
<main class="row contenedor">
<div class="col">
<div class="row question">
<div class="col-12">
<h3 id="title"></h3>
</div>
<div class="col-12">
<p class="redact" id="redact"></p>
</div>
<div class="row p-0">
<div class=" col-8 p-0 inputs">
<input id="answer1" name="select" class="selects" type="radio" value="1"><label class="select" for="answer1"><span id="option1"></span></label><br>
<input id="answer2" name="select" class="selects" type="radio" value="2"><label class="select" for="answer2"><span id="option2"></span></label><br>
<input id="answer3" name="select" class="selects" type="radio" value="3"><label class="select" for="answer3"><span id="option3"></span></label><br>
<input id="answer4" name="select" class="selects" type="radio" value="4"><label class="select" for="answer4"><span id="option4"></span></label>
</div>
<div class=" col-4 p-0 images"><img alt="correct" class="image correct" id="correct" src="http://www.clker.com/cliparts/D/1/e/4/N/X/ok-button-md.png"> <img alt="correct" class="image wrong" id="wrong" src="https://cdn.pixabay.com/photo/2013/07/13/10/33/cross-157492_960_720.png"></div>
<div class="col-12">
<p id="message"></p>
</div>
<div class="col-6">
<button class=" btn btn-danger mt-4 check" id="check">Check!</button>
</div>
<div class="col-6">
<button class=" btn btn-outline-dark mt-4 next" id="next" class="result">Next!</button>
</div>
</div>
</div>
<div class="col result" id="result">
<h2>Thanks For play</h2>
<p id="score"></p>
</div>
<div id="first">
<h2>Welcome to Quiz Game</h2>
<p class="introduction">The game consists of answering the questions that will appear as you answer, once you have finished answering, you will get your results</p>
<h3>ARE YOU READY?</h3><button class="btn btn-primary btn-large" id="start">Start!</button>
</div>
</div>
</main>
</div>
<script src="js/index.js">
</script>
</body>
</html>