TypeError：“TypeError：函数名称不是 HTMLButtonElement.onclick (/:2:54) 处的函数”

Posted 2023-03-16

【中文标题】TypeError：“TypeError：函数名称不是 HTMLButtonElement.onclick (/:2:54) 处的函数”

【英文标题】：TypeError: "TypeError: function name is not a function at HTMLButtonElement.onclick (/:2:54)"

【发布时间】：2021-02-16 13:41:47

【问题描述】：

我正在尝试在 javascript 上构建一个非常简单的调查，但我不断收到此错误“TypeError：startSurvey 不是 htmlButtonElement.onclick (/:2:54) 的函数”如果有人可以帮助我，我将不胜感激解决此错误或提供任何进一步的反馈和建议。

这是我的 HTML 代码：

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

<script>

这是我的脚本文件：

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/>';

【问题讨论】：

不是已经有人回答了吗？将函数和元素的 ID 命名为两个不同的东西。

我试过了，但它没有工作它说“ReferenceError：Survey is not defined at HTMLButtonElement.onclick”@berkobienb

将onclick更改为onClick

好的，现在它说“ReferenceError：startSurvey 未在 HTMLButtonElement.onclick 中定义”@berkobienb

将你的脚本放在body标签内

【参考方案1】：

这是解决您问题的小提琴：

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

将您的函数更改为 startSurvey() 而不仅仅是 start()。

另外，将您的 document.forms[i].innerHTML += 行移动到您的 solveSurvey() 函数的 for 循环中。

另外，请确保您的脚本链接正确（这最终是 repl.it 中的问题）

【参考方案2】：

看来你的id和函数是同名的，下面我把函数名改成了start();。 - 仅此一项可能会解决您的问题。

此外，这里似乎没有定义 i：

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/>';

你可能想解决这个问题。

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>

【讨论】：

嗨，它说“ReferenceError: start is not defined at HTMLButtonElement.onclick”还有我怎么能定义'i'，抱歉问了太多问题，我真的很陌生跨度>

对不起，我忘了标记你