Javascript variable not defined, using eventlistener in an external js file

Question

Just started learning javascript and started to using an external js file. Starting trying to make a password strength checker. But pass keeps coming up as undefined. I cant seem to find the problem. Thanks for your time and help.

The js file

pass.addEventListener('keyup', function(){
  stength();
})
function strength() {
  var val = document.getElementById("pass").value;
  var status = document.getElementById("length").value;
  var counter = 0;

  if (val != ""){
    if(val.length <= 6)
      counter=1;
    if(val.length >= 7 && val.length <= 10)
      counter=2;
    if(val.length < 10)
      counter=3;

    if (counter == 1) {
      status.innerHTML="Weak";
      status.style.background="#fc2407";
      status.style.color="#ffffff";
    }
    if (counter == 2) {
      status.innerHTML="Good";
      status.style.background="#fc9e07";
      status.style.color="#ffffff";
    }
    if (counter == 3) {
      status.innerHTML="Strong";
      status.style.background="#21dd53";
      status.style.color="#ffffff";
    }
  }
}

The html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="index.js"></script>
  </head>
  <body>
    <div class="wrap text-center">
      <p class="head">Enter Password</p>
      <input type="password" id="pass"/>
    </div>
    <div class="wrap text-center">
      <p class="head"> Password Strength</p>
      <p ckass="strength" id="length"></p>
    </div>
  </body>
</html>

What's "pass"? Is it supposed to be a global representing the DOM element with that ID (noting that not all browsers act the same way in this regard)? — Dave Newton
– Dave Newton, Commented Sep 22, 2019 at 1:49
error on console is:ReferenceError: pass is not definedindex.js:6:1 — Newt
– Newt, Commented Sep 22, 2019 at 1:52
pass is so when the user inputs a password it runs the strength function — Newt
– Newt, Commented Sep 22, 2019 at 1:55

Mister Jojo · Accepted Answer · 2019-09-22 01:59:38Z

1

do that!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  </head>
  <body>
    <div class="wrap text-center">
      <p class="head">Enter Password</p>
      <input type="password" id="pass"/>
    </div>
    <div class="wrap text-center">
      <p class="head"> Password Strength</p>
      <p ckass="strength" id="length"></p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

<script ... is just before </body> => HTML is a top down interpreter too

answered Sep 22, 2019 at 1:59

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew · Accepted Answer · 2019-09-22 01:54:07Z

1

Welcome to SO.

If this is all your code, it seems like you never actually defined what pass is. Try putting this at the top of your code before you reference pass.

var pass = document.getElementById('pass');

So your code should look something like this.

var pass = document.getElementById('pass');
pass.addEventListener('keyup', function(){
  stength();
})

Or if you are not going to reference that variable again you can just do it this way.

document.getElementById('pass').addEventListener('keyup', function(){
  stength();
})

answered Sep 22, 2019 at 1:54

Matthew

3,3193 gold badges24 silver badges35 bronze badges

3 Comments

Newt Over a year ago

Thank you for your answer! I have tried ``` var pass = document.getElementById('pass'); ``` However I get the following error: TypeError: pass is nullindex.js:9:1

Matthew Over a year ago

@Newt Oh yes, I missed the part that you referenced your script BEFORE you create the elements on the page. My apologies. I see that Mister just posted the fix for that. I would hate to just copy that in my answer.

Newt Over a year ago

Your help is still greatly appreciated :)

Collectives™ on Stack Overflow

Javascript variable not defined, using eventlistener in an external js file

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related