My Function will not inject text into my HTML-CodePudding

I am creating a quiz for my web site and I would like for my function to be able to inject text into my HTML. It has worked for every other function but this one does not work. I have tried to change my injection method. I have also tried to use a JQuery method to inject my text but it still wont let me.

function quiz() {
  var f = 0;
  alert(f);
  if (document.getElementById("answer1").checked == true) {
    f  ;
  };
  if (document.getElementById("answer2").checked == true) {
    f  ;
  };
  if (document.getElementById("answer3").checked == true) {
    f  ;
  };
  if (document.getElementById("answer4").checked == true) {
    f  ;
  };

  function checkpass() {
    var a = ""
    if (f == 4) {
      a = "Y"
      alert(a)
    } else {
      a = "N"
      alert(a)
    };
  };
  checkpass();
  alert(document.getElementById("score"))
  document.getElementById("score").innerHTML = `Score:${f}/4 ${a}`;
};

<div id="WebBody">
  <P>Answer True or False on qustions</P>
  <p>Is ___</p>
  <form>
    <input  id="answer1" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <p>Is ___</p>
  <form>
    <input  id="answer2" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <p>Is ___</p>
  <form>
    <input  id="answer3" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <p>Is ___</p>
  <form>
    <input  id="answer4" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <button onclick="quiz()">Submit</button>
  <p id="score">Score:Not Submitted</p>
</div>

CodePudding user response：

Your problem is here:

document.getElementById("score").innerHTML = `Score:${f}/4 ${a}`;

You are trying to access the variable "a" that's inside checkpass function, You need to put the variable outside from the checkpass functions.

This is your code

function checkpass() {
    var a = ""
    if (f == 4) {
      a = "Y"
      alert(a)
    } else {
      a = "N"
      alert(a)
    };
  };

It should be something like this:

var a = "";
function checkpass() {
    if (f == 4) {
      a = "Y"
      alert(a)
    } else {
      a = "N"
      alert(a)
    };
  };

And by the way, variable "f" is declared correctly it's not the problem because the error says "message": "Uncaught ReferenceError: a is not defined" and variable "a" is after variable "f" So it's more like it can't access variable "a" not var "f"

CodePudding user response：

<!DOctyPE html>
<html lang="en">
<body>


<div id="WebBody">
  <P>Answer True or False on qustions</P>
  <p>Is ___</p>
              <form>
                    <input  id="answer1" name="T/F" type="radio">
                    <label>True</label><br>
                    <input  name="T/F" type="radio">
                    <label>False</label>
              </form> 
              <hr>
  <p>Is ___</p>
              <form>
                    <input  id="answer2" name="T/F" type="radio">
                    <label>True</label><br>
                    <input  name="T/F" type="radio">
                    <label>False</label>
              </form> 
              <hr>
  <p>Is ___</p>
              <form>
                    <input  id="answer3" name="T/F" type="radio">
                    <label>True</label><br>
                    <input  name="T/F" type="radio">
                    <label>False</label>
              </form> 
              <hr>
  <p>Is ___</p>
              <form>
                    <input  id="answer4" name="T/F" type="radio">
                    <label>True</label><br>
                    <input  name="T/F" type="radio">
                    <label>False</label>
              </form> 
              <hr>
      <button onclick="quiz()">Submit</button>
  <p id="score">Score:Not Submitted</p>
</div>




<script>
function quiz() {
  var f = 0;
  var a = ""
  alert(f);
  if (document.querySelector("#answer1").checked == true){
    f   ;
  };
  if (document.querySelector("#answer2").checked == true){
    f   ;
  };
  if (document.querySelector("#answer3").checked == true){
    f   ;
  };
  if (document.querySelector("#answer4").checked == true){
    f   ;
  };
  function checkpass(){
    if (f == 4) {
      a = "Y"
      alert(a)
    } else { 
      a = "N"
      alert(a)
    };
  };
  checkpass();
  alert(document.querySelector("#score").textContent);
  document.querySelector("#score").innerHTML = `Score:${f}/4 ${a}`;
};

quiz();
</script>
</body>
</html>

CodePudding user response：

You just have to move the definition of a to outside checkpass or return it because it's needed in the last line (which is outside checkpass). (I'm showing the latter because another answer already shows the first). You might want to look into the js debugger in devtools, because this kind of slips are not unusual, but easy to catch with debugger.

(Also I changed your "score" element alert because alerts are not like console.log - full, expandable objects will not be displayed, just string.)

function quiz() {
  var f = 0;
  alert(f);
  if (document.getElementById("answer1").checked == true) {
    f  ;
  };
  if (document.getElementById("answer2").checked == true) {
    f  ;
  };
  if (document.getElementById("answer3").checked == true) {
    f  ;
  };
  if (document.getElementById("answer4").checked == true) {
    f  ;
  };
  
  function checkpass() {
    var a = "";
    if (f == 4) {
      a = "Y"
      alert(a)
    } else {
      a = "N"
      alert(a)
    };
    return a;
  };
  var a = checkpass();
  alert(document.getElementById("score").outerHTML)
  document.getElementById("score").innerHTML = `Score:${f}/4 ${a}`;
};

<div id="WebBody">
  <P>Answer True or False on qustions</P>
  <p>Is ___</p>
  <form>
    <input  id="answer1" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <p>Is ___</p>
  <form>
    <input  id="answer2" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <p>Is ___</p>
  <form>
    <input  id="answer3" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <p>Is ___</p>
  <form>
    <input  id="answer4" name="T/F" type="radio">   <label>True</label><br>   <input  name="T/F" type="radio">   <label>False</label>
  </form>
  <hr>
  <button onclick="quiz()">Submit</button>
  <p id="score">Score:Not Submitted</p>
</div>

CodePudding user response：

So the other answers explained what was wrong

Here is a version using recommended eventListener and a more elegant way of counting. Also the HTML is simpler and if you want to submit the form, you will get the correct names

Note this quiz does not know or care how many questions there are

const correct = ["answer1", "answer2", "answer3", "answer4"];
document.getElementById("quizForm").addEventListener("submit", e => {
  e.preventDefault(); // stop submit
  const f = [...document.querySelectorAll(".Radio-Button:checked")]
    .filter(rad => correct.includes(rad.id)).length; // count correct answers
  const a = f === correct.length ? "Y" : "N";
  document.getElementById("score").innerHTML = `Score:${f}/${correct.length} ${a}`;
});

<form id="quizForm">
  <div id="WebBody">
    <P>Answer True or False on questions</P>
    <p>Is ___</p>
    <label><input  id="answer1" name="T/F1" type="radio">True</label><br>
    <label><input  name="T/F1" type="radio">False</label>
    <hr>
    <p>Is ___</p>
    <label><input  id="answer2" name="T/F2" type="radio">True</label><br>
    <label><input  name="T/F2" type="radio">False</label>
    <hr>
    <p>Is ___</p>
    <label><input  id="answer3" name="T/F3" type="radio">True</label><br>
    <label><input  name="T/F3" type="radio">False</label>
    <hr>
    <p>Is ___</p>
    <label><input  id="answer4" name="T/F4" type="radio">True</label><br>
    <label><input  name="T/F4" type="radio">False</label>
    <hr>
    <button>Submit</button>
    <p id="score">Score:Not Submitted</p>
  </div>
</form>