Javascript if statements not executing

Question

Can anyone tell me what is going wrong here? The if statements are not executing, the code is part of a quiz where each question and answer looks like the included html, the function is supposed to create a summary of what percentage of points was attained.

function CreateSummary() {
  var possiblePoints = 0;
  var claimedPoints=0;
  var intManual=0;
  for (var i=0;i < intTotalQuestions;i++) {
    var objQuestion = document.getElementById('divQuestion' + i);
    if (objQuestion == null) {
      alert('Null! ' + i); }
    console.log(objQuestion)
    for (var j=0;j<objQuestion.getElementsByTagName('input').length;j++) {
       var objCurrentAnswer = objQuestion.getElementsByTagName('input')[j];
       console.log(objCurrentAnswer)
       if (objCurrentAnswer.correct == "1" && objCurrentAnswer.checked) {
          console.log("add")
          claimedPoints += 1;  }
       if (objCurrentAnswer.correct == "1") {
         console.log("add")
         possiblePoints += 1;  }
       if (objQuestion.getElementsByTagName('textarea').length > 0) {
         intManual +=1;
        }
   }
 }
 console.log(possiblePoints)
 console.log(claimedPoints)
 document.getElementById('lblPercentage').innerHTML = 'Percentage: <strong>' + ((possiblePoints/claimedPoints)*100) + '</strong>';
}

<div id="divQuestion0"   style="width:100%;height::auto;align:center;background-color:lightyellow;display:block">
<div ><span>You should use the phrase"calm down" when dealing with an angry or upset individual. </span></div>
<div id="divAnswer0" style="text-align:left;width:100%;padding:20px;"
<span><input value="1" correct=0 id="Q0A0" name="rb0" type="radio" ></input> True</span><br />
<span><input value="2" correct=1 id="Q0A1" name="rb0" type="radio" ></input> False</span><br />
</div>
</div>

Where is `intTotalQuestions` defined? If it is not, then the loop body will not execute. — trincot, Aug 06 '18 at 19:31
I am pretty sure you cannot add custom attributes on the html tag, such as you have with the "correct" attribute unless something has changed about html. — Stephen Flynn, Aug 06 '18 at 19:32

score 0 · Answer 1 · answered Aug 06 '18 at 19:39

0

You need to execute CreateSummary, if you want to call the function when app is started you can use IIFE (Immediately Invoked Function Expression) (function CreateSummary() {...})()

answered Aug 06 '18 at 19:39

Armando Mendivil

92
3

It doesn't make sense... if he call the function when app starts, it will never know if the user marked the correct `radio`, and also the loop will never happen (and nested `if` statements too) because `intTotalQuestions` is not setted anywhere, so it has no value – Calvin Nunes Aug 06 '18 at 19:43

Stephen Flynn · Answer 2 · 2018-08-06T19:53:43.123

Correct is not an attribute of input, therefore will not be available in the javascript and objCurrentAnswer.correct will always be null. You can do this:

function CreateSummary() {
  var possiblePoints = 0;
  var claimedPoints=0;
  var intManual=0;
  for (var i=0;i < intTotalQuestions;i++) {
    var objQuestion = document.getElementById('divQuestion' + i);
    if (objQuestion == null) {
      alert('Null! ' + i); }
    console.log(objQuestion)
    for (var j=0;j<objQuestion.getElementsByTagName('input').length;j++) {
       var objCurrentAnswer = objQuestion.getElementsByTagName('input')[j];
       console.log(objCurrentAnswer)
       if (objCurrentAnswer.getAttribute("data-correct") == "1" && objCurrentAnswer.checked) {
          console.log("add")
          claimedPoints += 1;  }
       if (objCurrentAnswer.getAttribute("data-correct") == "1") {
         console.log("add")
         possiblePoints += 1;  }
       if (objQuestion.getElementsByTagName('textarea').length > 0) {
         intManual +=1;
        }
   }
 }
 console.log(possiblePoints)
 console.log(claimedPoints)
 document.getElementById('lblPercentage').innerHTML = 'Percentage: <strong>' + ((possiblePoints/claimedPoints)*100) + '</strong>';
}

You can only add custom attributes in html using "data-" as the prefix.

<div id="divQuestion0"   style="width:100%;height::auto;align:center;background-color:lightyellow;display:block">
<div ><span>You should use the phrase"calm down" when dealing with an angry or upset individual. </span></div>
<div id="divAnswer0" style="text-align:left;width:100%;padding:20px;"
<span><input value="1" data-correct="0" id="Q0A0" name="rb0" type="radio" ></input> True</span><br />-
<span><input value="2" data-correct="1" id="Q0A1" name="rb0" type="radio" ></input> False</span><br />
</div>
</div>

he can use `data-` as well, not only `ng-` and his main problem is not this. Because here in his example he never calls `CreateSummary()` and the variable which he's using in the `for` is not declared — Calvin Nunes, Aug 06 '18 at 19:45
`ng-` is used by Angular. For custom attributes in general HTML, `data-` should be used. See [Custom attributes - Yea or nay?](https://stackoverflow.com/q/992115) — Heretic Monkey, Aug 06 '18 at 19:45
CreateSummary() is called in another function that isn't pictured. — Dajokn, Aug 06 '18 at 20:53

Javascript if statements not executing

2 Answers2