javascript - 在我移动滑块之前,密码生成器不起作用
问题描述
问题:在我移动滑块之前,我的密码生成器无法工作。但是,我希望该值默认为 8。因此,如果有人加载页面并单击生成 PW,则会填充 8 的随机 pw。
//generate a password function
function passwordGenerator () {
// Length of the password?
var passwordLength = document.getElementById('num').value;
// characters options for PW
const values = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
// defining password
var password = "";
// creating a loop to choose password
for (var i = 1; i <= passwordLength; i++) {
password = password + values.charAt(Math.floor(Math.random() * Math.floor(values.length -1)));
}
// adding the password to the content area
document.getElementById('display').value = password;
}
// adjust value when moving slider
function sliderMove(){
document.getElementById('num').value = document.getElementById('slider1').value;
document.getElementById('num').textContent = document.getElementById('num').value;
}
//copy to clipboard
function selectText() {
const input = document.getElementById('display');
input.focus();
input.select();
document.execCommand('copy')
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
}
.backgroundGray {
background-color: lightgray;
width: 100%;
height: 500%;
}
.passwordBox {
width: 500px;
height: 200px;
text-align: center;
}
body {
height: 100%;
background-color: lightgray;
}
.headText {
padding: 50px;
}
.buttonOnClick {
margin: 20px;
}
.passGenButton {
color: white;
background-color: red;
margin-right: 15%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 15%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
textarea {
padding: 20px;
font-size: 19px;
color: #4f4f4f;
}
.titleClass {
padding-top: 10px;
}
@media (max-width: 537px) {
.passGenButton {
color: white;
background-color: red;
margin-right: 1%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 1%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
.passwordBox {
width: 400px;
height: 200px;
text-align: center;
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
padding-left: 20px;
}
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
<title>Random Password Generator</title>
</head>
<body>
<div class="conatiner backgroundGray">
<div class="row">
<div class="col-12">
<div class="topText">
<!-- Header -->
<h1 class="text-center text-dark headText">Password Generator</h1>
</div>
<div class="container">
<div class='row'>
<div class="col-lg-12 col-sm-12 text-center">
<div class="content backgroundWhite">
<!-- Sub Header -->
<h4 class="titleClass">Generate a Password</h4>
<br />
<!-- Slider -->
<div class="slidecontainer">
<p>Select PW Length</p>
<input id="slider1" type="range" min="8" max="128" value="8" onchange="sliderMove()"
class="robClass">
<span id="num">8</span>
</div>
<br />
<!-- Password Box -->
<textarea class="passwordBox" type="text" id="display"
placeholder="Your Secure Password"></textarea>
<br />
<button onclick="passwordGenerator()" class="passGenButton buttonOnClick">Generate
Password</button>
<button class="buttonOnClick copyButton" defaultValue="8" onclick="selectText()">Copy to
clipboard</button>
<div id='length'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我玩过 HTML 和 JS。我试图创建一个 var num = 8; 没运气。
有人对我如何做到这一点有任何想法吗?
解决方案
在您的passwordGenerator
功能开始时:
var passwordLength = document.getElementById('num').value;
此元素 ( <span id="num">8</span>
) 没有value
属性,因此您的函数将尝试生成长度等于 的密码undefined
。
您应该从滑块中获取值:
var passwordLength = document.getElementById('slider1').value;
您还可以简化您的功能sliderMove
功能:
function sliderMove() {
document.getElementById('num').textContent = document.getElementById('slider1').value;
}
推荐阅读
- python - 遍历一列中的唯一字符串,并从与唯一字符串关联的其他 2 列创建字典或数据数组
- javafx - javafx 形状、绑定坐标值、性能问题、如何从场景中移除
- javascript - 在 Javascript 中,如何在没有时区的情况下打印出 Date 对象的日期和时间?
- google-apps-script - 导航谷歌应用脚本的最佳实践
- swiftui - 如何在 SwiftUI 中通过 lineLimit 限制 TextEditor?
- maven - 创建spring基础知识后的maven pom.xml,出现错误
- forms - KeyDown 事件:vbKeyUp、vbKeyDown 以增加表单中的日期字段而不会失去字段的焦点
- stripe-payments - 如何在 Stripe 的服务器端检查支付是否成功
- css - SASS @extend 生成的类
- go - 解析字符串以浮动货币