Calling a JavaScript function in HTML?

Question

I'm extremely new to JavaScript and HTML so go easy on me. I'm attempting to call a function from my external JavaScript file in my HTML file, but nothing I seem to do allows it to work.

JavaScript Code

var trueLength = false;
var password = "";
var things = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-=_+;':,./<>?";
var input = document.getElementById("len");


function generatePassword(passLength){
// Check to see if selected length is at least 8 characters long 
    while (trueLength = false){
    if (passLength > 8){
        trueLength = true;
    } else {
        passLength = prompt("Password Length must be at least 8 characters long! Please try again. ");
    }
}

// Select random character from things and add to password until desired length is reached.
for(var x = 0; x <= passlength;){
    var randomNum=Math.floor(Math.random()*things.length+1);
    password = password + things.charAt(randomNum);
}
alert("Your password is: " + password);
document.write("<h1>Your Password</h1><p>" + password + "</p>");
}

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body>
        <h1 align="center">Password Generator</h1>
        <script type="text/javascript" src="PassGen.js"></script>
        <script>
        var x = prompt("Enter password length: ")
        function generatePassword(x);
        </script>
    </body>
</html>

The goal is for the user to be prompted to input a password length, then generate a random password which will be alerted to the user and written on screen. However, only the header at the top of the screen is printed.

(I realize that I could just take the function out of the JavaScript file and run it normally, but I kinda wanna leave it like this so I know what to do in the future if I ever run into this situation again.)

`function generatePassword(x);` ist invalid syntax. It should be `generatePassword(x);` without the function. Also you can't use `document.write` that way. However actually you should never ever u it at all. — Lux, Mar 10 '19 at 00:33
https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Quentin, Mar 10 '19 at 00:37
Ok, my prompt message is coming up now, so the function is getting called. However, nothing else happens after THAT finishes. — ZBoogie12, Mar 10 '19 at 00:38
@Lux Ok, what would be the best way to print out my password from the JavaScript file onto the HTML file? — ZBoogie12, Mar 10 '19 at 00:45
`while (trueLength = false){` - That's an *assignment* (question should be closed: typo). So the *test* will be false as soon as it enters the loop, so it will exit the loop immediately. — Quentin, Mar 10 '19 at 00:46

score 0 · Accepted Answer · answered Mar 10 '19 at 03:33

Following is the code with Javascript inside <script> tag within HTML document. One thing you should be careful of while writing your javascript code in the HTML file is, to include your javascript code just before the ending tag of body </body>. so it get executed only when your html file is loaded. But if you add your javascript code in the starting ot html file, your JS code will be executed before the file is loaded.

<!DOCTYPE html>
<html>
<head>
    <title>Generate Password</title>
</head>
<body>
    <h1 align="center">Password Generated will be displayed here</h1>
    <p id="password" align="center"></p>
    <script>

    var PasswordLength = false;
    var password = "";
    var passwordChoice = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-=_+;':,./<>?";
    var input = prompt("Enter password length: ");
    var pass = document.getElementById("password");
    generatePassword(input);
    function generatePassword(passLength){
    while (PasswordLength == false){
        if (passLength >= 8){
             for(var x = 0; x < passLength;x++){
              var randomNum=Math.floor(Math.random()*passwordChoice.length+1);
              password = password + passwordChoice.charAt(randomNum);
          }
            PasswordLength = true;
        }
        else {
            passLength = prompt("Password Length must be 8 characters long.");
        }
    }
   
    pass.innerHTML = password;}
    </script>
</body>

</html>

And if you want to have your Javascript code in a separate file, which can be helpful in big programs, then you need to reference that file using <script> tag and this is the way you write it down.

var PasswordLength = false;
    var password = "";
    var passwordChoice = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-=_+;':,./<>?";
    var input = prompt("Enter password length: ");
    var pass = document.getElementById("password");
    generatePassword(input);
    function generatePassword(passLength){
    while (PasswordLength == false){
        if (passLength >= 8){
             for(var x = 0; x < passLength;x++){
              var randomNum=Math.floor(Math.random()*passwordChoice.length+1);
              password = password + passwordChoice.charAt(randomNum);
          }
            PasswordLength = true;
        }
        else {
            passLength = prompt("Password Length must be 8 characters long.");
        }
    }
   
    pass.innerHTML = password;}

<!DOCTYPE html>
<html>
<head>
    <title>Generate Password</title>
    <script src=""></script> 
</head>
<body>
    <h1 align="center">Password Generated will be displayed here</h1>
    <p id="password" align="center"></p>
</body>

</html>

Ehsan · Answer 2 · 2019-03-10T05:20:18.980

In your code there are the following problems :

1) Change function generatePassword(x); to generatePassword(x.length);

2) Change trueLength = false to trueLength === false

3) Change for(var x = 0; x <= passlength;){ to for(var x = 0; x < passLength; x++){

passlength => passLength , x<= to x< , insert x++

4) Change Math.floor(Math.random()*things.length+1); to Math.floor(Math.random()*(things.length)+1)

5) insert passLength = passLength.length; to else

var trueLength = false;
var password = "";
var things = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-=_+;':,./<>?";
var input = document.getElementById("len");

  var x = prompt("Enter password length: ")
  generatePassword(x.length);

function generatePassword(passLength){
// Check to see if selected length is at least 8 characters long 
    while (trueLength == false){
    if (passLength > 8){
        trueLength = true;
    } else {
        passLength = prompt("Password Length must be at least 8 characters long! Please try again. ");
passLength = passLength.length;
    }
}

// Select random character from things and add to password until desired length is reached.
for(var x = 0; x < passLength; x++){
    var randomNum=Math.floor(Math.random()*(things.length)+1);
    password = password + things.charAt(randomNum);
}
alert("Your password is: " + password);
document.write("<h1>Your Password</h1><p>" + password + "</p>");
}

<h1 align="center">Password Generator</h1>

You can use this code with less complexity :

var trueLength = false, password = "" ;
var things = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-=_+;':,./<>?";

var x = prompt("Enter password length: ")
generatePassword(x);

var input = document.getElementById("len");

function generatePassword(passLength){
  while ( passLength.length < 9 )
    passLength = prompt("Password Length must be at least 8 characters long! Please try again. ");

for ( var x = 0; x < passLength.length ; x++ ) {
    var randomNum = Math.floor ( Math.random() * (things.length)+1 );
    password = password + things.charAt(randomNum);
}

alert("Your password is: " + password);
document.write("<h1>Your Password</h1><p>" + password + "</p>");
}

<h1 align="center">Password Generator</h1>

TimeRamen · Answer 3 · 2019-03-10T01:26:21.603

Few things. In order to have something show up in HTML, you will need to select an HTML element in JavaScript. Next, you used 'passlength' instead of 'passLength' in the for loop. Third, when you write function generatepassword it is invalid syntax as Lux said. Lastly, your for loop doesn't go anywhere because you don't have a third expression. Which should be changed to for(var x = 0; x <= passLength;x++) Edit: Another thing I forgot was trueLength = false should be changed to trueLength == false or trueLength === false.

With all that said, here's my solution:

<!DOCTYPE html>
<html>
<head>
    <title>Password Generator</title>
</head>
<body>
    <h1 align="center">Password Generator</h1>
    <p align="center"></p>
    <!--script type="text/javascript" src="PassGen.js"></script-->


    <script>

    var trueLength = false;
    var password = "";
    var things = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-=_+;':,./<>?";
    //var input = document.getElementById("len");
    var ppass = document.querySelector("p");
    function generatePassword(passLength){
    while (trueLength == false){
    if (passLength > 8){
        trueLength = true;
    } else {
        passLength = prompt("Password Length must be at least 8 characters long! Please try again. ");
    }
    }
    for(var x = 0; x <= passLength;x++){
        var randomNum=Math.floor(Math.random()*things.length+1);
        password = password + things.charAt(randomNum);
    }
    //alert("Your password is: " + password);
    //document.write("<h1>Your Password</h1><p>" + password + "</p>");
    ppass.textContent = password;}


    var x = prompt("Enter password length: ")
    generatePassword(x);
    </script>
</body>

</html>

What I added was a <p> tag to display the password once it's generated. I use textContent to display it once the password is done generating. And i use document.querySelector to access it.

Calling a JavaScript function in HTML?

3 Answers3