javascript - 无法让我的范围滑块正确显示值
问题描述
问题:当最终用户调整滑块位置时,我无法让我的范围滑块显示当前值。但是,当最终用户选择生成密码时,它会更新当前值。
有没有人对我如何让它按照我想要的方式运行有任何想法?
谢谢你。
// var rangeInput = document.getElementById("slider1").value;
document.getElementById('num').addEventListener("change", function() {
let value = document.getElementById("slider1").value;
document.getElementById("num").textContent = value;
console.log(value);
}, false);
//generate a password
function passwordGenerator () {
// how long is the password going to be?
var passwordLength = document.getElementById('num').value;
// characters options for PW
const values = "ABCDEFGHIJKLabcdefghikk0123456789!@#$%";
// 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('num').textContent = (passwordLength);
document.getElementById('display').value = password;
}
//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: 700px;
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: 27px;
color: #4f4f4f;
}
.titleClass {
padding-top: 10px;
}
<!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">
<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">
<h4 class="titleClass">Generate a Password</h4>
<br />
<!-- Slider -->
<div class="slidecontainer">
<input id="slider1" type="range" min="8" max="128" value="8" onchange="num.value=value" class="robClass">
<span id="num">8</span>
</div>
<!-- <input id="slider1" type='range' min='8' max='128' value="8" onchange="rangevalue.value=value"
class="robClass">
<span id='sliderValue'></span>-->
<br />
<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" onclick="selectText()">Copy to clipboard</button>
<div id='length'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
非常感谢您提前提供的帮助。
解决方案
因为你addEventlistener
错了元素;#num
不是你改变的那个,而是slider1
将您的 id 更正为
document.getElementById('slider1').addEventListener("change", function() {}, false);
推荐阅读
- r - R如何编写像SAS这样的宏
- html - 响应式网站中的锚标记
- firebase - 获取带有 firebase id 的 google 个人资料图片
- mongodb - Mongoose 和 MERN:无法调用和路由多个发现
- android - SSH 客户端 - 如何?
- node.js - Node.js API 网关和 nginx 作为反向代理
- javascript - 为什么我的球没有弹起来?
- c++ - C++ 对象需要更新其指向其他对象的共享指针的向量和映射
- angular - 将不工作的“路由器插座”发射到“应用组件”
- javascript - 在没有 Ajax 和 jQuery 的 IE9/Angular 5/TypeScript 上使用 FormData