Checkbox "Cannot access 'checkBox01' before initialization"

Asked

Viewed 74 times

0

I don’t understand, I gave the checkbox ID and called in Avascript as . value, but when mark and run command is said Cannot access 'checkBox01' before initialization. Can you help me? Thank you. 

function metodoCalcular() {

 

 const notas = {

   primeiroBimestre: notaMatematica_1.value + " Nota referente ao 1º Bimestre de 2019",
   segundoBimestre: notaMatematica_2.value + " Nota referente ao 2º Bimestre de 2019",
   terceiroBimestre: notaMatematica_3.value + " Nota referente ao 3º Bimestre de 2019",    
   quartoBimestre: notaMatematica_4.value + " Nota referente ao 4º Bimestre de 2019",

 }



 let nota_01 = parseFloat(notaMatematica_1.value)
 let nota_02 = parseFloat(notaMatematica_2.value)
 let nota_03 = parseFloat(notaMatematica_3.value)
 let nota_04 = parseFloat(notaMatematica_4.value)

 let calcular = ((nota_01 +  nota_02 +  nota_03 + nota_04) / 4)

console.log(notas)

console.log("A média Final é de aluno é:", parseFloat(calcular.toFixed(2)))

let checkBox01 = checkBox01.value
let checkBox02 = checkBox02.value
let checkBox03 = checkBox03.value
let checkBox04 = checkBox04.value


if(checkBox01.checked){
console.log("A nota do primeiro Bimestre foi:", nota_01)
}
else if (checkBox02.checked){
console.log("A nota do segundo Bimestre foi: ", nota_02)
}
else if(checkBox03.checked){
console.log("A nota do terceiro Bimestre foi:", nota_03)
}
else if(checkBox04.checked){
console.log("A nota do quarto Bimestre foi:", nota_04)
}


}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="metodoCalcular.js"></script>
    <script src="https://rawgit.com/caelum/projeto01/fichaAcademiaComInterfaceGrafica/apostilaIgnore/libBrasil.js"></script>
    <script src="https://rawgit.com/caelum/projeto01/fichaAcademiaComInterfaceGrafica/apostilaIgnore/mostra.js"></script>

</head>
<body>


    <p>Nome:</p>
    <br>
    <input id="nome" type="text">
    <br>
    <p>Nota de Matemática 01:</p>
    <input id="notaMatematica_1" type="text">
    <br>
    <p>Nota de Matemática 02:</p>
    <input id="notaMatematica_2" type="text">
    <br>
    <p>Nota de Matemática 03:</p>
    <input id="notaMatematica_3" type="text">
    <br>
    <p>Nota de Matemática 04:</p>
    <input id="notaMatematica_4" type="text">
    <br>
    <br>
    <input id="checkBox01" type="checkbox">1º Bimestre</input>
    <input id="checkBox02" type="checkbox">2º Bimestre</input>
    <input id="checkBox03" type="checkbox">3º Bimestre</input>
    <input id="checkBox04" type="checkbox">4º Bimestre</input>
    <br>
    <br>

    <button onclick="metodoCalcular()">Cálcular</button>    
    <br>



</body>
</html>

javascript html5

3 answers

2

You did not create a reference in the variables for the checkbox. Your code on the following line is wrong in which you will get an error:

let checkBox01 = checkBox01.value
let checkBox02 = checkBox02.value
let checkBox03 = checkBox03.value
let checkBox04 = checkBox04.value

Use, for example, the method querySelector to be able to point out the checkbox in HTML:

let checkBox01 = document.querySelector("#checkBox01").value;
let checkBox02 = document.querySelector("#checkBox02").value;
let checkBox03 = document.querySelector("#checkBox03").value;
let checkBox04 = document.querySelector("#checkBox04").value;

2


You defined the ID in the HTML elements, but at no time searched the DOM with javascript.

To find the element, there are several functions, as every element has an ID, and the ID must be unique, the ideal is to use then the getElementById.

So at the beginning of your function, you could start looking for these elements:

const notaMatematica_1 = document.getElementById("notaMatematica_1");
const notaMatematica_2 = document.getElementById("notaMatematica_2");
const notaMatematica_3 = document.getElementById("notaMatematica_3");
const notaMatematica_4 = document.getElementById("notaMatematica_4");

Above we create input/text variables, but we should do the same with checkbox:

const checkBox01 = document.getElementById("checkBox01");
const checkBox02 = document.getElementById("checkBox02");
const checkBox03 = document.getElementById("checkBox03");
const checkBox04 = document.getElementById("checkBox04");

With this, we can delete (just commented as an example) the declaration of the old variables:

//let checkBox01 = checkBox01.value
//let checkBox02 = checkBox02.value
//let checkBox03 = checkBox03.value
//let checkBox04 = checkBox04.value

With this your code already works, see below the same with the changes made:

function metodoCalcular() {

  const notaMatematica_1 = document.getElementById("notaMatematica_1");
  const notaMatematica_2 = document.getElementById("notaMatematica_2");
  const notaMatematica_3 = document.getElementById("notaMatematica_3");
  const notaMatematica_4 = document.getElementById("notaMatematica_4");

  const checkBox01 = document.getElementById("checkBox01");
  const checkBox02 = document.getElementById("checkBox02");
  const checkBox03 = document.getElementById("checkBox03");
  const checkBox04 = document.getElementById("checkBox04");

  const notas = {
    primeiroBimestre: notaMatematica_1.value + " Nota referente ao 1º Bimestre de 2019",
    segundoBimestre: notaMatematica_2.value + " Nota referente ao 2º Bimestre de 2019",
    terceiroBimestre: notaMatematica_3.value + " Nota referente ao 3º Bimestre de 2019",    
    quartoBimestre: notaMatematica_4.value + " Nota referente ao 4º Bimestre de 2019",
  }

  let nota_01 = parseFloat(notaMatematica_1.value);
  let nota_02 = parseFloat(notaMatematica_2.value);
  let nota_03 = parseFloat(notaMatematica_3.value);
  let nota_04 = parseFloat(notaMatematica_4.value);

  let calcular = ((nota_01 +  nota_02 +  nota_03 + nota_04) / 4);

  if (Number.isNaN(calcular)) {
    calcular = 0;
  }

  console.log(notas)
  console.log("A média Final é de aluno é:", parseFloat(calcular.toFixed(2)));

  if(checkBox01.checked){
    console.log("A nota do primeiro Bimestre foi:", nota_01);
  }

  if (checkBox02.checked){
    console.log("A nota do segundo Bimestre foi: ", nota_02);
  }

  if(checkBox03.checked){
    console.log("A nota do terceiro Bimestre foi:", nota_03);
  }

  if(checkBox04.checked){
    console.log("A nota do quarto Bimestre foi:", nota_04);
  }

}
<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>

      <script src="metodoCalcular.js"></script>
      <script src="https://rawgit.com/caelum/projeto01/fichaAcademiaComInterfaceGrafica/apostilaIgnore/libBrasil.js"></script>
      <script src="https://rawgit.com/caelum/projeto01/fichaAcademiaComInterfaceGrafica/apostilaIgnore/mostra.js"></script>

  </head>

  <body>
      <p>Nome:</p>
      <br>
      <input id="nome" type="text">
      <br>
      <p>Nota de Matemática 01:</p>
      <input id="notaMatematica_1" type="text">
      <br>
      <p>Nota de Matemática 02:</p>
      <input id="notaMatematica_2" type="text">
      <br>
      <p>Nota de Matemática 03:</p>
      <input id="notaMatematica_3" type="text">
      <br>
      <p>Nota de Matemática 04:</p>
      <input id="notaMatematica_4" type="text">

      <br>
      <br>

      <input id="checkBox01" type="checkbox">1º Bimestre
      <input id="checkBox02" type="checkbox">2º Bimestre
      <input id="checkBox03" type="checkbox">3º Bimestre
      <input id="checkBox04" type="checkbox">4º Bimestre

      <br>
      <br>

      <button onclick="metodoCalcular()">Cálcular</button>    
      <br>

  </body>

</html>

Note that there are some other things, the value of input/text are not being handled, so they may be empty and generate Nan error duration calculations, I treated only the result as an example with the IsNaN, but the correct one would be to treat all values. I also removed the else if of the verification of checked, otherwise, only the first selection would be displayed on the console, even marking the others.

Reference:

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN

  • Thanks Daniel ! It worked super well ! :)

1

Complementing Leandro’s response, you can use getElementById.value as well.

let checkBox01 = document.getElementById("#checkBox01").value;
let checkBox02 = document.getElementById("#checkBox02").value;
let checkBox03 = document.getElementById("#checkBox03").value;
let checkBox04 = document.getElementById("#checkBox04").value;

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.