Generator haseł

pytanie zadane 8 listopada 2018 w JavaScript przez Sobol3k Użytkownik (690 p.)

Stworzyłem generator haseł, ale nie do końca coś mi chce to działać. Wywala błąd o niepoprawnym rozmiarze tablicy to raz, a dwa że nie wiem czy dobrze sprawdzam że pole typu checkbox nie zostało zaznaczone.

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
      body{
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          padding: 0;
          margin: 0;
          background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
                      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
                      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
      }
      
      .container{
          width: 500px;
          height: 500px;
          background: rgba(255, 255, 255, 0.2);
          border: 2px dotted black;
          position: relative;
          text-align: center;
          border-radius: 10px;
          box-shadow: 1px 1px 55px 5px deepskyblue;
      }
      
      .container .block{
          margin: 10px;
      }
      
      .container-pass{
          margin: 20px auto;
          width: 50%;
          height: 70px;
          border: 2px solid black;
          border-radius: 10px;
      }
      
      .container-pass > strong{
          display: block;
          margin: 5px;
          font-size: 20px;
      }
      
      .created-password{
          margin: 5px 0 5px 0;
          font-size: 25px;
          font-weight: 900;
          color: gray;
      }
      
      h1{
          text-shadow: 5px 5px 5px gray;
      }
      
      button{
          display: inline-block;
          width: 150px;
          height: 60px;
          background: #666;
          border: 2px solid deepskyblue;
          border-radius: 5px;
          font-size: 15px;
          box-shadow: 1px 1px 70px 1px white;
          position: relative;
      }
      
      button:before{
          content: '';
          display: block;
          width: 40px;
          height: 57px;
          background: rgba(255, 255, 255, 0.3);
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) skewX(-15deg);
      }
  </style>
</head>
<body>
  <div class="container">
    <h1>Generator haseł</h1>
    <fieldest>
      <legend>Wybierz z ilu znaków ma się składać</legend>
        <div class="block">
          <input type="radio" value="six" name="characters"> 6 - znaków
          <input type="radio" value="eight" name="characters"> 8 - znaków
          <input type="radio" value="ten" name="characters"> 10 - znaków
        </div>
    </fieldest>
    <div class="container-pass">
      <strong>Twoje Hasło:</strong>
      <p class="created-password">-------</p>
    </div>
    <button type="button" id="btn">Wygeneruj hasło</button>
  </div>
<script>
  const btn = document.querySelector('#btn');
  const charactersRadio = document.querySelectorAll('input[name="characters"]');
  const returnedPasswordToPelement = document.querySelector('.created-password');
  let selectedValue = null;
  let generatedPassword;
    
  var tab = [];
  tab[0] = 'a';
  tab[1] = '!';
  tab[2] = 'b';
  tab[3] = '@';
  tab[4] = 'c';
  tab[5] = '#';
  tab[6] = 'd';
  tab[7] = '%';
  tab[8] = 'e';
  tab[9] = '&';
  tab[10] = 'f';            

    btn.addEventListener("click", function(){
        
       for(const radio of charactersRadio){
           
           if(radio.checked) {
               let length = Number(radio.value);
               let newTab = new Array(length);
               
               for(let i=0; i<newTab.length; i++){
                   newTab[i] = Math.round(Math.floor()*(9-0+1)+0)
               }
               
               for(let j=0; j<newTab.length; j++){
                   generatedPassword += tab[newTab[j]];
               }
           }
           
       }
        
       if(radio.value === null){
           alert('Nie zaznaczyłeś żadnego pola!');
       }
        
        return returnedPasswordToPelement.textContent = generatedPassword;
    });
</script>
</body>
</html>

2 odpowiedzi

odpowiedź 8 listopada 2018 przez shotokan Nałogowiec (39,660 p.)
edycja 8 listopada 2018 przez shotokan

A jak ma nie wywalać błędu skoro Ty przekazujesz jako wielkość tablicy wartość pola radio czyli "six", "eight" lub "ten".
Rozmiar tablicy musi być liczbą.

pole typu checkbox

a gdzie Ty masz w swoim kodzie takie pole? Input typu radio to nie checkbox.

Edit:
I co to w ogóle jest?

newTab[i] = Math.round(Math.floor()*(9-0+1)+0)

jak już coś to zamiast Math.floor() powinno być raczej Math.random().

Moim zdaniem trochę ten kod zamotałeś. Proponuję zapoznać się z dokumentacją obiektu Number.

komentarz 8 listopada 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Math.round(Math.floor()*(9-0+1)+0)

zapis pozwalający uzyskać NaN :)

a tak serio to ostatnio w pracy mieliśmy rozkmine jak uzyskać undefined w jak najmniejszej liczbie znaków... i wygrała wersja:

[].x

4 znaki vx 9 znaków w "undefined" :D

komentarz 8 listopada 2018 przez shotokan Nałogowiec (39,660 p.)

Ale po co tak komplikować życie, nie prościej wpisać po prostu value="6" ? I po co tworzyć nową tablicę? Nie prościej wylosować te 6 znaków z już istniejącej?