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.)
3 answers
solution1
0 ACCPTED 2019-03-10 03:33:17
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>
solution2
0 2019-03-10 04:56:51
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>
solution3
-1 2019-03-10 01:16:48
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.