Как сделать открытие формы по кнопке с помощью JS

Question

Я создал переменную, в которую поместил все свои кнопки, сделал для каждой из них отдельный обработчик событий. В общем, суть вопроса заключается в том, как сделать выезд HTML формы по клику на кнопку, которую потом в дальнейшем можно будет отправить и обработать.

let elements = document.querySelectorAll(".functions_btn");
let add_admin = document.querySelector(".add_adm");

for (let i = 0; i < elements.length; i++) {
    elements[0].onclick = function(){
    add_admin.classList.add('._active');
  }
  elements[1].onclick = function(){
    alert('Yes! Thats work');
  };
  elements[2].onclick = function(){
    alert('Yes! Thats work');
  };
  elements[3].onclick = function(){
    alert('Yes! Thats work');
  };
  elements[4].onclick = function(){
    alert('Yes! Thats work');
  };
  elements[5].onclick = function(){
    alert('Yes! Thats work');
  };
  elements[6].onclick = function(){
    alert('Yes! Thats work');
  };
  elements[7].onclick = function(){
    alert('Yes! Thats work');
  };
}

body, html {
    font-family: 'Montserrat', sans-serif;
    min-width: 75%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

.wrapper {
    height: 100vh;
    background-color: grey;
}

.logo {
    padding-left: 50px;
    height: auto; 
    width: auto; 
    max-width: 100px; 
    max-height: 100px;
}

.nav_bar {
    margin-top: -5rem;
    height: 3em;
    width: 75%;
    background-color: #bababa;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.2);
}

.nav_link {
    height: auto;
    vertical-align: middle;
    display: inline-block;
    margin: 12.5px 15px;
    position: relative;

    color: #fff;
    text-decoration: none;

    transition: color .1s linear;
}

.nav_link:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;

    background-color: #0396ff;
    opacity: 0;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;

    transition: opacity .3s linear;
}

.nav_link:hover {
    color: #0396ff;
}

.nav_link:hover:after {
    opacity: 1;
}


.middle_block {
    margin-top: 150px;
    display: flex;
}

.functions_block {
    display: block;
    margin-left: 5%;
    color: #fff;
    background-color: #bababa;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.2);
}

.functions_text {
    font-size: 30px;
    margin-left: 25px;
    text-align: left;
}

.functions_hr {
    margin-left: 25px;
    border: none;
    width: 75%;
    color: rgba(0, 0, 0, 0.655);
    border-top: 3px solid;
}

.functions_btn {
    font-size: 20px;
    height: auto;
    display: block;
    margin: 15px 25px;
    position: relative;

    color: #fff;
    text-decoration: none;

    transition: color .1s linear;
}

.functions_btn:hover {
    color: #0396ff;
}

.functions_btn:hover:after {
    opacity: 1;
}

.about_adm {
    justify-content: space-between;
    line-height: 3.0;
    margin-top: 15px;
    margin-left: 25px;
    display: inline;
}

.field {
    clear:both; 
    text-align:right;
}

field {
    clear:both; 
    text-align:right;
}

label {
    float:left;
}

.main {
    float:left
}

.add_adm {
    visibility: hidden;
}

.add_adm_active {
    visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="src/style.css"
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>
</head>
<body>
    <div class="wrapper">
        <img src="src/pic/logo512x512.png" class="logo">
        <div class="header">
            <nav class="nav_bar">
                <a class="nav_link" href="#">Керування адміністрацією</a>
                <a class="nav_link" href="#">Список адміністрації</a>
            </nav>
        </div>
        <div class="middle_block">
            <div class="functions_block">
                <h1 class="functions_text">Функції</h1>
                <hr class="functions_hr">
                <a class="functions_btn" id="function-btn" href="#">Додати адміністратора</a>
                <a class="functions_btn" id="function-btn" href="#">Призначити на посаду</a>
                <a class="functions_btn" id="function-btn" href="#">Підвищити адміністратора</a>
                <a class="functions_btn" id="function-btn" href="#">Додати адміністратора місяця</a>
                <hr class="functions_hr">
                <a class="functions_btn" id="function-btn" href="#">Видати попередження</a>
                <a class="functions_btn" id="function-btn" href="#">Видати догану</a>
                <a class="functions_btn" id="function-btn" href="#">Видати сувору догану</a>
                <hr class="functions_hr">
                <a class="functions_btn" id="function-btn" href="#">Зняти адміністратора</a>
            </div>
            <div class="about_adm">
                <div class="add_adm">
                    <div class="field">
                        <label for="nick_name">Нік-нейм адміністратора</label>
                        <input type="text" id="nick_name" />
                    </div>
                    <div class="field">
                        <label for="adm_level">Рівень адміністратора</label>
                        <input type="text" id="adm_level" />
                    </div>
                    <div class="field">
                        <label for="adm_telegram">Telegram адміністратора</label>
                        <input type="text" id="adm_telegram" />
                    </div>
                    <div class="field">
                        <label for="adm_discord">Discord адміністратора</label>
                        <input type="text" id="adm_discord" />
                    </div>
                    <div class="field">
                        <label for="adm_appointment_date">Discord адміністратора</label>
                        <input type="text" id="adm_appointment_date" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="src/main.js"></script>
</body>
</html>

БЛОГ НА HUSL

Как сделать открытие формы по кнопке с помощью JS

Ответы (0 шт):