Estoy creando un cuestionario para mi sitio web y me gustaría que mi función pudiera inyectar texto en mi HTML. Ha funcionado para todas las demás funciones, pero esta no funciona. He intentado cambiar mi método de inyección. También intenté usar un método JQuery para inyectar mi texto, pero aún no me deja.
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>
Tu problema está aquí:
document.getElementById("score").innerHTML = `Score:${f}/4 ${a}`;
Está intentando acceder a la variable " a " que está dentro de la función de paso de verificación. Debe colocar la variable fuera de las funciones de paso de verificación.
este es tu codigo
function checkpass() {
var a = ""
if (f == 4) {
a = "Y"
alert(a)
} else {
a = "N"
alert(a)
};
};
Debería ser algo como esto:
var a = "";
function checkpass() {
if (f == 4) {
a = "Y"
alert(a)
} else {
a = "N"
alert(a)
};
};
Y por cierto, la variable " f " se declara correctamente, no es el problema porque el error dice "message": "Uncaught ReferenceError: a is not defined" y la variable " a " está después de la variable " f ". 't acceso variable " a " no 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>
Solo tiene que mover la definición de a paso de checkpass externo o devolverlo porque se necesita en la última línea (que es el paso de checkpass ). (Muestro lo último porque otra respuesta ya muestra lo primero). Es posible que desee ver el depurador js en devtools , porque este tipo de errores no son inusuales, pero son fáciles de detectar con el depurador.
(También cambié su alerta de elemento de "puntuación" porque las alertas no son como console.log: no se mostrarán objetos completos y expandibles, solo cadenas).
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>