無法讓我的范圍滑塊正確顯示值
[英]Unable to get my range slider to display value correctly
問題描述
問題：當最終用戶調整滑塊位置時，我無法讓我的范圍滑塊顯示當前值。 但是，當最終用戶選擇生成密碼時，它會更新當前值。
有沒有人對我如何讓它按照我希望的方式運行有任何想法？
謝謝你。
// 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>
非常感謝您提前提供幫助。
3 個解決方案
解決方案1
0 2020-01-17 18:48:08
因為您將addEventlistener到錯誤的元素； #num不是你改變的而是slider1
將您的 id 更正為document.getElementById('slider1').addEventListener("change", function() {}, false);
解決方案2
0 2020-01-17 18:51:56
因此，您需要修改一些內容。 我在下面的代碼中為所做的修改添加了注釋。
// 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); */ const slider = document.getElementById("slider1"); const sliderValue = document.getElementById("num"); // set the current value sliderValue.innerHTML = slider.value; // add an 'oninput' handler, set the "num" display to the current value slider.oninput = function() { sliderValue.innerHTML = this.value; } //generate a password function passwordGenerator() { // characters options for PW const values = "ABCDEFGHIJKLabcdefghikk0123456789!@#$%"; // how long is the password going to be? //var passwordLength = document.getElementById('num').value; let passwordLength = document.getElementById('num').innerHTML; // use innerHTML not value here // defining password let password = ""; // creating a loop to choose password for (var i = 1; i <= passwordLength; i++) { // instead of `password = password + values.charAt(....)` just use 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; let slider = document.getElementById("slider1"); // set the slider back to default of 8 and invoke the oninput event slider.value = 8; // use value here not textContent slider.oninput.apply(slider); // programmatically call the `oninput` event document.getElementById('display').innerHTML = password; // use innerHTML here not 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: 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" class="robClass"> <span id="num">8</span> </div> <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>
解決方案3
-1 2020-01-17 18:53:52
在不更改大部分原始代碼的情況下，我只是添加了一個新函數，該函數將num的值保存為slider1的值，然后更新了num的textContent 。
function sliderMove(){ document.getElementById('num').value = document.getElementById('slider1').value; document.getElementById('num').textContent = document.getElementById('num').value; }
然后在input標簽的onchange中調用sliderMove()函數
<input id="slider1" type="range" min="8" max="128" value="8" onchange="sliderMove()" class="robClass">
可能不是最好的解決方案，但它似乎對我有用。 希望這會有所幫助。
// 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; } 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: 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="sliderMove()" 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>
如何從范圍 slider 中獲取值，以便在計算中使用它並顯示結果？
[英]How to get the value from a range slider so that it can be used in a calculation and display a result?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.