Question

以下javascript代码没有显示任何内容，尽管此代码完全由Fiddle运行。 javascript控制台给了我2条错误消息，我不明白：无法加载资源：net :: ERR_FILE_NOT_FOUND和Uncaught TypeError：无法设置属性＆＃39; onclick＆＃39;为null，所以任何人都理解错误消息的原因，我怎样才能使我的代码工作，以便计算＆amp;显示用户会选择的内容？

代码是：

var numericalValues = new Array();
numericalValues["Alot"]= 4;
numericalValues["NotMuch"]= 2;
numericalValues["NoSometimes"]= 3;
numericalValues["Hate"]= 0;
numericalValues["Chocolate"]= 4;
numericalValues["Carrot"]= 0;
numericalValues["Both"]= 2;
numericalValues["None"]= 0;


function getScoreChoco()
{
var scoreChoco = 0;
var form = document.forms["form"];
var choco = form.elements["choco"];
for(var i=0; i<choco.length; i++)
{
    if(choco[i].checked)
    {
    scoreChoco = numericalValues[choco[i].value];
    break;
    }

}
return scoreChoco;
}

function getScoreCake()
{
var scoreCake = 0;
var form = document.forms["form"];
var cake = form.elements["cake"];

for(var i=0; i<cake.length; i++)
{
  if(cake[i].checked)
  {
  scoreCake = numericalValues[cake[i].value];
  break;
  }

}
return scoreCake;
}


function getTotal()
{

var totalScore = getScoreCake() + getScoreChoco();


document.getElementById('result').innerHTML = "Your total score is: "+totalScore;



document.getElementById('calculate').onclick=getTotal;
}

好的HTML代码：

<form id="form" name="form">
<fieldset id="controls">
<p>Do you like chocolate?
<label>Yes a lot </label>
<input type="radio" name="choco" id="alot" value="Alot" checked="true">

<label>Not that much </label>
<input type="radio" name="choco" id="notMuch" value="NotMuch">
<label>No, but still I don't mind eating it sometimes </label>
<input type="radio" name="choco" id="noSometimes" value="NoSometimes">

 <label>No, I hate it </label>
<input type="radio" name="choco" id="hate" value="Hate">
</p>
<p>Do you prefer chocolate cake or carrot cake?
<label>chocolate </label>
<input type="radio" name="cake" id="chocolate" value="Chocolate" checked="true">

<label>Carrot </label>
<input type="radio" name="cake" id="carrot" value="Carrot">

<label>Both</label>
<input type="radio" name="cake" id="both" value="Both">

<label>None </label>
<input type="radio" name="cake" id="none" value="None">
</p>

<p>
  <input type="button" name="Calculate" id="calculate" value="Calculate" />
</p>
    <p id="result"></p>

    </form>

Answer 1

我猜你的javascript代码位于HTML代码之上。因此，当您尝试访问document.getElementById('calculate')时，尚未解析html代码，因此还没有标识为calculate的元素，因此它返回undefined。尝试将javascript代码放在body标签的末尾而不是它的任何位置（可能在head标签中，我猜）

JavaScript错误消息：未捕获的TypeError：无法设置null的属性'onclick'

1 个答案: