Dynamiczne pobieranie wartości z inputa

1

Zamysł jest taki, żeby (domyślnie schowany) przycisk wyświetlał się, kiedy użytkownik wpisze w pole inputa 3 lub więcej znaków. Analogicznie w drugą stronę, jeżeli usunie znaki z inputa - przycisk automatycznie się "schowa". Z góry dziękuję za pomoc

<body>
    <div class="main">
        <input name="content" class="no-outline" placeholder="What's your name?" id="useer">
        <button id="set-user">Let's move on!</button>
    </div>
</body>
<script>
    $("button").on("click", function () {
        var username = document.getElementById('useer');
        alert(username.value);
    })
    $(document).ready(function () {
        $("input").keydown(function() {
            var useerr = document.getElementById("#useer");
            if (useerr.value.length >= 3 && useerr.value.length <= 20) {
                $("#set-user").css({
                    "display": "block"
                })
            }
        });
    });
</script>
2

Nie wiem , nie znam się - ale wydaj mi się, iż "#" przy wywoływaniu ID elementów są niepotrzebne.

2
  1. Nigdzie nie ukrywasz inputa jeśli znaków będzie mniej niż 3 lub więcej niż 20
  2. Zupełnie niepotrzebnie używasz JQuery do tak prostych rzeczy.

Ja bym zrobił tak:

<html>
  <body>  

    <div class="main">
      <input name="content" class="no-outline" placeholder="What's your name?" id="useer">
      <button id="set-user">Let's move on!</button>
    </div>

    <style>
      #set-user { display:none; };       /* przycisk domyślnie ukryty */
    </style>

    <script>
        // sprawdzanie stanu pola input i odpowiednia akcja
        function checkInputState(){          
          let myButton = document.getElementById ( 'set-user' );
          let myInput = document.getElementById ( 'useer' );

          if ( ( myInput.value.length >=3 ) && ( myInput.value.length <=20 ) ){
            // Pokazuję przycisk
            myButton.style.display = 'block' ;
          } else {
            // Ukrywam przycisk
            myButton.style.display = 'none' ;
          }
        }
            
        // Skrypt uruchamiamy dopiero po wczytaniu strony
        window.addEventListener ( 'load', ()=>{
          let myButton = document.getElementById ( 'set-user' );
          let myInput = document.getElementById ( 'useer' );
        
          // Sprawdzanie stanu na różnych zdarzeniach bo na np. wklejenie myszą też musi działać
          myInput.addEventListener ( 'keyup', checkInputState );
          myInput.addEventListener ( 'change', checkInputState );
          myInput.addEventListener ( 'click', checkInputState );
          
          // akcja po kliknięciu przycisku
          myButton.addEventListener ( 'click', ()=>{
            alert ('Akcja!');
          });
        });
    </script>
  </body>
</html>
1

Poza tym - może rzecz całkowicie nieistotna jeśli chodzi o działanie programu, jednak mająca duży wpływ na czytelność oraz na późniejsze utrzymanie takiego kodu. Ale chodzi o literówki:

id="useer"

czy:

var useerr = document.getElementById("#useer"); // tu oczywiście masz błąd z #

stosujesz te literówki konsekwentnie (czyli pewnie edytor ci podpowiada z autocomplete albo po prostu nie rozróżniasz tych słów. Chociaż nie, gdybyś nie rozróżniał tych słów, to byś nie stosował ich konsekwentnie), tym niemniej poprawna forma to user. Jak będziesz za każdym razem stosował inną formę (useer, useerr, co dalej, uuseeer czy userrrr?) to wcześniej czy później ci się coś pomajta.

1 użytkowników online, w tym zalogowanych: 0, gości: 1