Попытка получить значение моего слайдера диапазона. (bootstrap 4 / JS) - PullRequest
Новая
       28

Попытка получить значение моего слайдера диапазона. (bootstrap 4 / JS)

1 голос
/ 12 января 2020 

var slider = new Slider('#slider1',{
  tooltip: 'always'
});
//generate a password
function passwordGenerator () {
    // how long is the password going to be?
    var passwordLength = document.getElementById('slider1').value;       
    // characters options for PW
    const values = "ABCDEFGHIJKLabcdefghikk0123456789!@#$%";      
    // defining password
    var password = "";
   // creating a loop to choose password
   for (var i = 0; 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;
<!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">Password Generator</h1>
           </div>
       </div>
    </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 />                     
                <input id='slider1' type='range' min='8' max='128' name="slider"  class="robClass">
                <span id="currentPwLength">Password Length: <span id='sliderValue'></span></span>
                <br /> 
                <input class="passwordBox" type="text" id="display" placeholder="Your Secure Password">
                <br />
                <button onclick="passwordGenerator()" class="passGenButton">Generate Password</button>
                <button onclick="">Copy to clipboard</button>
                <div id='length'></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>

Мне трудно заставить свой ползунок диапазона отображать значение длины пароля. Я хотел бы попытаться использовать всплывающую подсказку, если это возможно. Я много гуглил, пытаясь найти ответ. Я включил мой код ниже. Любые отзывы или идеи будут с благодарностью.

1 Ответ

0 голосов
/ 13 января 2020

Запустите сниппет и проверьте, хорошо ли это, сея:) 

<!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">
   
    <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">Password Generator</h1>
           </div>
       </div>
    </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 Just Sliding</h4>
                <br /> 
                <span id="currentPwLength">Password Length: </span>
                <br>
                <input id="slider1" type='range' min='8' max='128' name="slider" onchange="passwordGenerator()" class="robClass">
                <span id='sliderValue'></span>
                <br />
                <span class="passwordBox" id="display" placeholder="Your Secure Password"></span>
                <br />
                <button onclick="">Copy to clipboard</button>
                <div id='length'></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  const slider = document.getElementById('slider1');

//generate a password
function passwordGenerator() {

    // how long is the password going to be?
    var passwordLength = slider.value;

   
  // characters options for PW

  const values = "ABCDEFGHIJKLabcdefghikk0123456789!@#$%";

  
  // defining password
  var password = "";


// creating a loop to choose password

for (var i = 0; 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('sliderValue').textContent = (passwordLength);
document.getElementById('display').textContent = (password);
}

 passwordGenerator(); // To start with a value
</script>

</body>
</html>
...