document is not defined javascript error

Question

I have finished a project and it runs perfectly.I keep getting error notifications that 'document' is not defined. I have the same notification every time I address the document. Is there a way I can keep this from being recognized as an error?

JS:

  function check_prime() {
      var input = document.getElementById("enteredNumber").value;
          var number = parseInt(input);


        if (isNaN(number)) {
       alert("Oops! Please enter a valid number.");
            document.getElementById("enteredNumber").value="";
            document.getElementById("answer").innerHTML =  "";
            document.getElementById("enteredNumber").focus();

        }

        else if (input.length === 0) {
  alert("Please enter a valid input");
            document.getElementById("enteredNumber").focus();

        }

       else if (!isNaN(number)) {
                        var divisors = is_perfect(number);
                        if (divisors) {
                            document.getElementById("answer").innerHTML = "Congratulations! " + number + " is a perfect number.";
                      alert("Congratulations! " + number + " is a perfect number. The divisors are: " + divisors.toString() + ".") ;


                        }
                        else {
                            document.getElementById("answer").innerHTML = "I'm sorry! " + number + " is not a perfect number."
                        }
                    }
                    else {
                        document.getElementById("answer").innerHTML = "Please enter a number.";
                    }
                }


function is_perfect(number) {
var temp = 0;
var divisors = [];
for(var i=1;i<=number/2;i++) {
    if (number%i === 0) {
        divisors.push(i);
        temp += i;
    }
  }  

return temp === number ? divisors : null;
 }



    function clear_textbox(){
      document.getElementById("answer").innerHTML =  "";
      document.getElementById("enteredNumber").value="";
      document.getElementById("enteredNumber").focus();

    }

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">


    </head>



  <body>
<h2> PERFECTION </h2>
<h3> PLEASE ENTER A NUMBER: </h3><br>
  <div>
<input type="text" id="enteredNumber" autofocus value = "" /> <br><br>
<input type="submit" value="Check" 
title="Perfection"
onclick="check_prime()" />
<input type="submit" value="Clear" 
 title="Click here to clear the text box."
onclick="clear_textbox()" />
 <br><br>
<p id="answer"></p>
         </div>



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="app.js"> 

  </script>

I am also getting errors that 'alert' is not defined... I don't know if I missed something.

Welcome to Stack Overflow. Please see minimal reproducible example in the Help Center. It is also useful if you use the snippet <> toolbar button. — Alan Larimer
– Alan Larimer, Commented Oct 20, 2017 at 3:07

Austin Greco · Accepted Answer · 2017-10-20 04:08:51Z

Update: new info

Try adding

/*eslint-env browser*/

at the top.

ERROR: 'document' is not defined. [no-undef] document.getElementById("answer").innerHTML = "";

This error is a lint error (See eslint [no-undef]). It will not affect your code running in a browser, but your local build may be stopped from running when it detects lint errors.

You are probably using eslint, so check out this guide and you should configure

{
  "env": {
    "browser": true
  }
}

in your .eslintrc file.

Maybe an even easier way is just add this comment:

/*eslint-env browser*/

Your code appears to be working. Are you getting that error in the browser console? If not it might just be a lint error.

It would really help to paste the exact error message you are getting.

function check_prime() {
  var input = document.getElementById('enteredNumber').value;
  var number = parseInt(input);

  if (isNaN(number)) {
    alert('Oops! Please enter a valid number.');
    document.getElementById('enteredNumber').value = '';
    document.getElementById('answer').innerHTML = '';
    document.getElementById('enteredNumber').focus();
  } else if (input.length === 0) {
    alert('Please enter a valid input');
    document.getElementById('enteredNumber').focus();
  } else if (!isNaN(number)) {
    var divisors = is_perfect(number);
    if (divisors) {
      document.getElementById('answer').innerHTML =
        'Congratulations! ' + number + ' is a perfect number.';
      alert(
        'Congratulations! ' +
        number +
        ' is a perfect number. The divisors are: ' +
        divisors.toString() +
        '.'
      );
    } else {
      document.getElementById('answer').innerHTML =
        "I'm sorry! " + number + ' is not a perfect number.';
    }
  } else {
    document.getElementById('answer').innerHTML = 'Please enter a number.';
  }
}

function is_perfect(number) {
  var temp = 0;
  var divisors = [];
  for (var i = 1; i <= number / 2; i++) {
    if (number % i === 0) {
      divisors.push(i);
      temp += i;
    }
  }

  return temp === number ? divisors : null;
}

function clear_textbox() {
  document.getElementById('answer').innerHTML = '';
  document.getElementById('enteredNumber').value = '';
  document.getElementById('enteredNumber').focus();
}

<h2> PERFECTION </h2>
<h3> PLEASE ENTER A NUMBER: </h3><br>
<div>
  <input type="text" id="enteredNumber" autofocus value="" /> <br><br>
  <input type="submit" value="Check" title="Perfection" onclick="check_prime()" />
  <input type="submit" value="Clear" title="Click here to clear the text box." onclick="clear_textbox()" />
  <br><br>
  <p id="answer"></p>
</div>

ERROR: 'document' is not defined. [no-undef] document.getElementById("answer").innerHTML = "";
@user7124275 yes this is a lint error for sure. It will not affect your code running in a browser, but your local build may be stopped from running. You are probably using eslint, so check out this guide and you should configure { "env": { "browser": true } } in your .eslintrc file.

Tariqul_Islam · Accepted Answer · 2020-02-21 14:31:44Z

0

To remove this error you can use eslint. For Brackets editor install brackets-eslint

answered Feb 21, 2020 at 14:31

Tariqul_Islam

5657 silver badges7 bronze badges

Collectives™ on Stack Overflow

document is not defined javascript error

2 Answers 2

Update: new info

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update: new info

2 Comments

Comments

Linked

Related