CODEWITHSUNDEEP
javascript
Acemi
Acemi

Reputation: 173

JavaScript error msg : Uncaught TypeError: Cannot set property 'onclick' of null

The below javascript code is displaying nothing,although this code works by Fiddle perfectly. The javascript console gives me 2 error messages which I don't understand: Failed to load resource: net::ERR_FILE_NOT_FOUND and Uncaught TypeError: Cannot set property 'onclick' of null, so anyone understands the reason of the error messages and how can I get my code worked so it will calculate & display stuff that users will choose?

The code is:

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;
}

Okay the HTML code for it:

<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>

Upvotes: 0

Views: 3298

Answers (1)

markasoftware
markasoftware

Reputation: 12662

I'm guessing that your javascript code is located above the HTML code. Therefore, when you try to access document.getElementById('calculate'), the html code has not been parsed yet, so there is no element with id calculate yet, so it returns undefined. Try putting the javascript code at the end of the body tag instead of wherever it is (probably in the head tag, im guessing)

Upvotes: 2

Related Questions