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 class="Radio-Button" id="answer1" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer2" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer3" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer4" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<button onclick="quiz()">Submit</button>
<p id="score">Score:Not Submitted</p>
</div>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"
<!DOctyPE html>
<html lang="en">
<body>
<div id="WebBody">
<P>Answer True or False on qustions</P>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer1" name="T/F" type="radio">
<label>True</label><br>
<input class="Radio-Button" name="T/F" type="radio">
<label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer2" name="T/F" type="radio">
<label>True</label><br>
<input class="Radio-Button" name="T/F" type="radio">
<label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer3" name="T/F" type="radio">
<label>True</label><br>
<input class="Radio-Button" name="T/F" type="radio">
<label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer4" name="T/F" type="radio">
<label>True</label><br>
<input class="Radio-Button" 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>
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 class="Radio-Button" id="answer1" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer2" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer3" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<p>Is ___</p>
<form>
<input class="Radio-Button" id="answer4" name="T/F" type="radio"> <label>True</label><br> <input class="Radio-Button" name="T/F" type="radio"> <label>False</label>
</form>
<hr>
<button onclick="quiz()">Submit</button>
<p id="score">Score:Not Submitted</p>
</div>