TypeError: "TypeError: function name is not a function at HTMLButtonElement.onclick (/:2:54)"

Viewed 476

I'm trying to build a really simple survey on Javascript but I keep getting this error "TypeError: startSurvey is not a function at HTMLButtonElement.onclick (/:2:54)" I would really appreciate if anybody can help me solve this error or provide any further feedback and suggestions.

Here's my HTML code:

<div class="surveysection">
    <button onclick="startSurvey()" id="startSurvey">Start Survey</button>
    <div id="questions"></div> 
</div>

<script>

Here's my script file:

var ourQuestions = [
  {
    question:'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',
    answers: {
      a: '10-15%',
      b: '85-90%',
      c: '45-50%',
      d: '25-30%'
    },
    correctAnswer: 'b'
  },
  {
    question: 'If you have lit a campfire before, how did you extinguish it?',
    answers: {
      a: 'I did not extinguish it and waited for it to die on its own',
      b: 'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',
      c: 'I have never lit a campfire before.',
      d: 'uhhh'
    },
    correctAnswer: 'b'
  },
  {
    question: 'What are the two most common reasons that forest fires start?',
    answers: {
      a: 'Lightning and human negligence',
      b: 'Spontaneous combustion and erosion',
      c: 'Animals igniting flames and overcrowded bushlands',
      d: 'uhhh'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What time of the year do most forest fires occur?',
    answers: {
      a: 'Summer',
      b: 'Spring',
      c: 'Fall',
      d: 'Winter'
    },
    correctAnswer: 'a'
  },
  {
    question: 'How fast do you think forest fires spread?',
    answers: {
      a: '10.8 km/h',
      b: '6.4 km/h',
      c: '22.2 km/h',
      d: '3.2 km/h'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What do forest fires need in order to burn?',
    answers: {
      a: 'Water',
      b: 'High humidity',
      c: 'Fuel',
      d: 'Clear weather'
    },
    correctAnswer: 'c'
  },
  {
    question: 'What is one of the main toxic gases present in forest fire smoke?',
    answers: {
      a: 'Osmium tetroxide',
      b: 'Disulfur decafluoride',
      c: 'Tungsten hexafluoride ',
      d: 'carbon monoxide'
    },
    correctAnswer: 'd'
  },
  {
    question: 'What natural disasters could be caused as a consequence of a destructive forest fire?',
    answers: {
      a: 'Erosion, flash flooding and landslides',
      b: 'Tornadoes',
      c: 'Snow',
      d: 'Tsunami and earthquakes'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What major factor determines a forest fire’s behaviour?',
    answers: {
      a: 'Amount of water vapour in air',
      b: 'Density of Forests',
      c: 'Wind',
      d: 'Hours of sunlight'
    },
    correctAnswer: 'c'
  }
];

function startSurvey(){
    
    var i;
    var j;
    var k;
    for(i=0; i<ourQuestions.length; i++){
        document.getElementById("questions").innerHTML +='<form id="question">Q'+(i+1)+': '+ ourQuestions[i].question;
        
        for(j=0; j<ourQuestions[i].answers.length; j++){
            document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ ourQuestions[i].answers[j] +'" id="value4" type="checkbox" />' + ourQuestions[i].answers[j] + '<br/>';
         }
     document.getElementById("questions").innerHTML +='</form><br/><br/>';
    }
    
    document.getElementById("questions").innerHTML += '<button onclick="solveQuiz()">Solve Quiz</button>';
    
}

function solveSurvey(){
  var x;
  var txt = ' ';
  var i = 0;
  var correct = 0; 
  for(i = 0; i < document.forms.length;i++) { 
    x = document.forms[i]; 
    for(j = 0; j<x.length; j++){
      if(x[j].checked) { 
        correctAnswer = ourQuestions[i].correctAnswer;
        if(x[j].value == ourQuestions[i].answers[correctAnswer]){
          correct += 1;
        }
      }
   }
 }
 document.getElementById("questions").innerHTML += 'Correct answers: '+ correct;
} 

document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ ourQuestions[i].answers[j] +'" id="value4" type="radio" />' + ourQuestions[i].answers[j] + '<br/>';
2 Answers

Looks like your id and function are the same name, below I changed the function name to start();. - This alone will probably fix your problem.

Additionally it looks like i is not defined here:

document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ ourQuestions[i].answers[j] +'" id="value4" type="radio" />' + ourQuestions[i].answers[j] + '<br/>';

You might want to fix that.

var ourQuestions = [
  {
    question:'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',
    answers: {
      a: '10-15%',
      b: '85-90%',
      c: '45-50%',
      d: '25-30%'
    },
    correctAnswer: 'b'
  },
  {
    question: 'If you have lit a campfire before, how did you extinguish it?',
    answers: {
      a: 'I did not extinguish it and waited for it to die on its own',
      b: 'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',
      c: 'I have never lit a campfire before.',
      d: 'uhhh'
    },
    correctAnswer: 'b'
  },
  {
    question: 'What are the two most common reasons that forest fires start?',
    answers: {
      a: 'Lightning and human negligence',
      b: 'Spontaneous combustion and erosion',
      c: 'Animals igniting flames and overcrowded bushlands',
      d: 'uhhh'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What time of the year do most forest fires occur?',
    answers: {
      a: 'Summer',
      b: 'Spring',
      c: 'Fall',
      d: 'Winter'
    },
    correctAnswer: 'a'
  },
  {
    question: 'How fast do you think forest fires spread?',
    answers: {
      a: '10.8 km/h',
      b: '6.4 km/h',
      c: '22.2 km/h',
      d: '3.2 km/h'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What do forest fires need in order to burn?',
    answers: {
      a: 'Water',
      b: 'High humidity',
      c: 'Fuel',
      d: 'Clear weather'
    },
    correctAnswer: 'c'
  },
  {
    question: 'What is one of the main toxic gases present in forest fire smoke?',
    answers: {
      a: 'Osmium tetroxide',
      b: 'Disulfur decafluoride',
      c: 'Tungsten hexafluoride ',
      d: 'carbon monoxide'
    },
    correctAnswer: 'd'
  },
  {
    question: 'What natural disasters could be caused as a consequence of a destructive forest fire?',
    answers: {
      a: 'Erosion, flash flooding and landslides',
      b: 'Tornadoes',
      c: 'Snow',
      d: 'Tsunami and earthquakes'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What major factor determines a forest fire’s behaviour?',
    answers: {
      a: 'Amount of water vapour in air',
      b: 'Density of Forests',
      c: 'Wind',
      d: 'Hours of sunlight'
    },
    correctAnswer: 'c'
  }
];

function start(){
    
    var i;
    var j;
    var k;
    for(i=0; i<ourQuestions.length; i++){
        document.getElementById("questions").innerHTML +='<form id="question">Q'+(i+1)+': '+ ourQuestions[i].question;
        
        for(j=0; j<ourQuestions[i].answers.length; j++){
            document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ ourQuestions[i].answers[j] +'" id="value4" type="checkbox" />' + ourQuestions[i].answers[j] + '<br/>';
         }
     document.getElementById("questions").innerHTML +='</form><br/><br/>';
    }
    
    document.getElementById("questions").innerHTML += '<button onclick="solveQuiz()">Solve Quiz</button>';
    
}

function solveSurvey(){
  var x;
  var txt = ' ';
  var i = 0;
  var correct = 0; 
  for(i = 0; i < document.forms.length;i++) { 
    x = document.forms[i]; 
    for(j = 0; j<x.length; j++){
      if(x[j].checked) { 
        correctAnswer = ourQuestions[i].correctAnswer;
        if(x[j].value == ourQuestions[i].answers[correctAnswer]){
          correct += 1;
        }
      }
   }
 }
 document.getElementById("questions").innerHTML += 'Correct answers: '+ correct;
} 

document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="'+ ourQuestions[i].answers[j] +'" id="value4" type="radio" />' + ourQuestions[i].answers[j] + '<br/>';
<div class="surveysection">
    <button onclick="start()" id="startSurvey">Start Survey</button>
    <div id="questions"></div> 
</div>

Here is a fiddle fixing your issue:

https://jsfiddle.net/bradberkobien/x4hjy8m2/3/

Change your function to be startSurvey() instead of just start().

Also, move your document.forms[i].innerHTML += line up into the for loop in your solveSurvey() function.

Also, make sure your script is linked correctly (this was ultimately the problem in repl.it)

Related