Как сохранить в переменной значение тега input в JavaScript?

222

13 декабря 2021, 01:50

Нужно чтобы после того, как пользователь введёт своё имя и нажмёт на Enter , начиналась анимация и вместо имяПользователя было значение переменной (т.е. то, что ввёл пользователь.)

HTML

<!DOCTYPE html>
<html>
 <head>
   <title>Моя галерея</title>   
   <link rel="stylesheet" href="three.css">
   <script src="jquery-3.4.1.min.js"></script> 
   <script src="two.js"></script>
   <script src="jquery.animate-shadow.js"></script>
 </head>
 <body>
    <div class="whiteBg">
    <header class="oneSl">
        <h1 class="firstTxt"><span>Добрый вечер!</span></h1>
        <h1 class="inputName">
            <span>Представьтесь, пожалуйста</span>
            <input id="inpukBox" class="inputBox" type="text" autofocus required>
        </h1>
        <h1 class="letsGo">
            <div>
                <span class="peredSpan">Здравствуйте, <span id="aZachem">
                имя Пользователя</span></br></span>
                <span class="spanTwo">Листайте вниз, чтобы рассмотреть мою галерею</span>
            </div>
        </h1>
    </header>
    </div>
    <div>
        <img class="onePhoto" src="фото1.jpg"/>
        <header>
        </header>
    </div>
 </body>
</html>

    var today = new Date();
    var hours = today.getHours();
var hello = (hours < 6) ? "Доброй ночи" : 
    (hours < 12) ? "Доброе утро" :
    (hours < 18) ? "Добрый день" :
    "Добрый вечер" ;
$(function(){
    $(".firstTxt").text(hello);
    $(".firstTxt").animate({opacity: true}, 2000, (function(){
        $(this).animate({top: "-30px"}, 470,(function(){
            $(".inputName").animate({opacity: true}, 2000, (function(){
        $(this).animate({top: "-30px"}, 470);
        }));
        }));
        }));
    $("#aZachem").keyup(function(){
        $(this).text("анальный жопожор");
    });
    });
var userName = ("inpukBox");

Answer 1

У вас повешено событие не на тот элемент. Что бы отловить нажатие enter используйте keyCode === 13

$(function () {
    $(".firstTxt").text(hello);
    $("#inpukBox").on('keypress', function (event) {
        if (event.keyCode === 13 && $(this).val()) {
            $("#aZachem").text($(this).val())
            $(".firstTxt").animate({ opacity: true }, 2000, (function () {
                $(this).animate({ top: "-30px" }, 470, (function () {
                    $(".inputName").animate({ opacity: true }, 2000, (function () {
                        $(this).animate({ top: "-30px" }, 470);
                    }));
                }));
            }));
        }
    });
});