CODEWITHSUNDEEP
javascripthtml
MEMER
MEMER

Reputation: 23

Why is the score variable at the end of the code not showing up?

This is a form, it checks if a certain radio is checked and adds 5 to the score but for some reason console keeps saying that it's not defined. You can get to the second page by filling in the information on the first one and then you will find the radio quiz. You have to choose x and score will add 5, but for some reason it does not show.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="yeah.css">
</head>
<body>
    <fieldset>
    <form id="form1">
        <h1>Formulaire</h1>
        <h2>Votre nom</h2>  <input type="text" name="" id="nom"><br>
        <p id="p1" ></p>
        <h2>Votre prenom</h2>  <input type="text" name="" id="prenom"><br>
        <p id="p2"></p>
        <h2>Class</h2> <select name="" id="class">
            <optgroup label="choose"  >
               
                <option value="info">info</option>
                <option value="tech">tech</option>
                <option value="lettre">lettre</option>
            </optgroup><br>
            <p id="p3"></p>


        </select>
        <h2>Groupe:</h2> <input type="number" id="num"><br>
        <button onclick="check()" type="button" >send</button>
    <button>reset</button>
    </form>
    </fieldset>
    
    
    <fieldset>
        <form action="" id="quiz">
            <h1></h1>
            <h2>what is the right variable name</h2>
            <input type="radio" name="first" id="first">
            x <br>
            <input type="radio" name="" id="">
            4gg <br>
            <input type="radio" name="" id="">
            if <br>
            <h2>check the correct loop syntax</h2>
            <input type="checkbox" name="" id="one">for (i++,0,9){}<br> 
            <input type="checkbox" name="" id="two">do {}while()<br>
            <input type="checkbox" name="" id="">for i in range(): <br>
            <br>
            <h2>How Find the lenght of A </h2>
            <textarea name="" id="" cols="30" rows="2"></textarea><br>
            <button  onclick="quiz()" >calculate result</button>
            <button>reset</button>

        </form>
    </fieldset>
    <script lang="javascript" >
        function check(){
            valid = true;
            a=document.getElementById("nom").value;
            b=document.getElementById("prenom").value;
            c=document.getElementById("class").value;
            d=document.getElementById("num").value;
            if (a==""){
                document.getElementById("p1").innerHTML="bruv type ur name"
                valid= false
            }
            if (valid == true){
                document.getElementById("form1").style.display="none"
                document.getElementById("quiz").style.display="block"
            }

        }
        
        function quiz(){
            const score= 0
            f=document.getElementById("first")
            if (f.checked == true ){
                
                score = 5;
                
                
                
            }
        }
        alert(score)
        
        

    </script>
</body>
</html>

Upvotes: 0

Views: 73

Answers (2)

Spectric
Spectric

Reputation: 31992

You are calling alert(score) outside the function in which score is declared. This is outside the scope. I'm pretty sure you meant to have it inside the function.

Additionally, as @seriously has pointed out, it makes no sense to declare score as a constant, since constants cannot be modified after declaration (which you must do in your example). Instead, use var.

function check() {
  valid = true;
  a = document.getElementById("nom").value;
  b = document.getElementById("prenom").value;
  c = document.getElementById("class").value;
  d = document.getElementById("num").value;
  if (a == "") {
    document.getElementById("p1").innerHTML = "bruv type ur name"
    valid = false
  }
  if (valid == true) {
    document.getElementById("form1").style.display = "none"
    document.getElementById("quiz").style.display = "block"
  }
}


function quiz() {
  var score = 0
  f = document.getElementById("first")
  if (f.checked == true) {
    score = 5;
  }
  alert(score)
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="yeah.css">
</head>

<body>
  <fieldset>
    <form id="form1">
      <h1>Formulaire</h1>
      <h2>Votre nom</h2> <input type="text" name="" id="nom"><br>
      <p id="p1"></p>
      <h2>Votre prenom</h2> <input type="text" name="" id="prenom"><br>
      <p id="p2"></p>
      <h2>Class</h2>
      <select name="" id="class">
        <optgroup label="choose">

          <option value="info">info</option>
          <option value="tech">tech</option>
          <option value="lettre">lettre</option>
        </optgroup><br>
        <p id="p3"></p>


      </select>
      <h2>Groupe:</h2> <input type="number" id="num"><br>
      <button onclick="check()" type="button">send</button>
      <button>reset</button>
    </form>
  </fieldset>


  <fieldset>
    <form action="" id="quiz">
      <h1></h1>
      <h2>what is the right variable name</h2>
      <input type="radio" name="first" id="first"> x <br>
      <input type="radio" name="" id=""> 4gg <br>
      <input type="radio" name="" id=""> if <br>
      <h2>check the correct loop syntax</h2>
      <input type="checkbox" name="" id="one">for (i++,0,9){}<br>
      <input type="checkbox" name="" id="two">do {}while()<br>
      <input type="checkbox" name="" id="">for i in range(): <br>
      <br>
      <h2>How Find the lenght of A </h2>
      <textarea name="" id="" cols="30" rows="2"></textarea><br>
      <button onclick="quiz()">calculate result</button>
      <button>reset</button>
    </form>
  </fieldset>
</body>

</html>

Upvotes: 3

Abdel-hilmi
Abdel-hilmi

Reputation: 73

you are defining your variable inside the function but calling it outside which is a different scope either alert inside the function or return the score

Upvotes: 0

Related Questions