0

При выборе одно из пунктов в выпадающем списке, он почему-то не отображается. Почему?

Сам сайт http://ilyin1ib.beget.tech/

введите сюда описание изображения

введите сюда описание изображения

const selectSingle = document.querySelector('.__select');
    const selectSingle_title = selectSingle.querySelector('.__select__title');
    const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');

    // Toggle menu
    selectSingle_title.addEventListener('click', () => {
        if ('active' === selectSingle.getAttribute('data-state')) {
            selectSingle.setAttribute('data-state', '');
        } else {
            selectSingle.setAttribute('data-state', 'active');
        }
    });

    // Close when click to option
    for (let i = 0; i < selectSingle_labels.length; i++) {
        selectSingle_labels[i].addEventListener('click', (evt) => {
            selectSingle_title.textContent = evt.target.textContent;
            selectSingle.setAttribute('data-state', '');
        });
    }
html,
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    scroll-behavior: smooth;
    background-color: #E5E5E5;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1280px;
    padding: 40px 80px;
    box-sizing: border-box;
    margin: 0 auto;
}

.item {
    display: flex;
    justify-content:  space-between;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 24px 80px rgba(0, 0, 0, 0.1);
    border-radius: 1px;

}

.col {
    width: 50%;
    height:  100%;
}


.img {
    display: flex;
    position: relative;
    background: url(../img/big-bg.png) center no-repeat;
   background-size: 100% 100%;
    min-height:  500px;
    min-width: 560px;
}

.img img {
    position: absolute;
    left: 10px;
    right: 0;
    bottom: 42px;
    margin: auto;

}

.img-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}


h1 {
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    padding: 40px !important;
}

.img span {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    padding: 0 0 40px 40px;
}


.form-block {
    text-align: center;
}

.title {
    background-color: #F8F8F8;
    padding: 30px;
    border-radius: 30px;
}

h2 {
    font-weight: 800;
    font-size: 30px;
    color: #212121;
}


form {
    padding: 50px 100px !important;
}

label {
    text-transform: uppercase;
    text-align: left;
    width: 100%;
    font-weight: 800;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px !important;
}

.green {
    color: #428A60;
}



input {
    display: block;
    margin: 0 auto;
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
    border-radius: 5px !important;
    background: #F8F8F8;
    padding: 15px 20px;
    width: 100%;
    margin-bottom: 20px !important;
}



input::placeholder {
    font-weight: 600;
    font-size: 14px;
}

.phone-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}


.phone-block input {
    margin-bottom: 0 !important;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: #428A60;
    border-radius: 5px !important;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

button i {
    margin-left: 10px;
}

button:hover {
    background-color: #3BC374;
    color: #000;
}


 .__select {
     position: relative;
     width: 116px;
     height: 47px;
     margin: 0 auto;
}
 .__select[data-state="active"] .__select__title::before {
     transform: translate(-3px, -50%) rotate(-45deg);
}
 .__select[data-state="active"] .__select__title::after {
     transform: translate(3px, -50%) rotate(45deg);
}
 .__select[data-state="active"] .__select__content {
     opacity: 1;
}
 .__select[data-state="active"] .__select__label + .__select__input + .__select__label {
     max-height: 40px;
     border-top-width: 1px;
}
 .__select__title {
     display: flex;
     align-items: center;
     width: 100%;
     height: 100%;
     padding: 8px 16px;
     border-radius: 5px;
     border: solid 1px #c7ccd1;
     cursor: pointer;
     background: #F8F8F8;
}
 .__select__title::before, .__select__title::after {
     content: "";
     position: absolute;
     top: 50%;
     right: 16px;
     display: block;
     width: 10px;
     height: 2px;
     transition: all 0.3s ease-out;
     background-color: #333;
     transform: translate(-3px, -50%) rotate(45deg);
}
 .__select__title::after {
     transform: translate(3px, -50%) rotate(-45deg);
}
 .__select__title:hover {
     border-color: #d8093a;
}
 .__select__title:hover::before, .__select__title:hover::after {
     background-color: #d8093a;
}
 .reset {
     display: flex;
     width: 230px;
     padding: 8px 16px;
     margin: 0 auto;
     margin-bottom: 10px;
     border: solid 1px #c7ccd1;
     border-radius: 5px;
     transition: all 0.2s ease-out;
     cursor: pointer;
     font-weight: bold;
     background-color: #fff;
     color: #333;
}
 .reset:hover {
     background-color: #d8093a;
     color: #fff;
}
 .__select__content {
     position: absolute;
     top: 40px;
     right: 0;
     left:  0;
     display: flex;
     flex-direction: column;
     background-color: #fff;
     border: 1px solid #c7ccd1;
     border-top: none;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     transition: all 0.3s ease-out;
     opacity: 0;
     z-index: 8;
}
 .__select__input {
     display: none;
}
 .__select__input:checked + label {
     background-color: #dedede;
}
 .__select__input:disabled + label {
     opacity: 0.6;
     pointer-events: none;
}
 .__select__label {
     display: flex;
     align-items: center;
     width: 100%;
     height: 40px;
     max-height: 0;
     padding: 0 16px;
     transition: all 0.2s ease-out;
     cursor: pointer;
     overflow: hidden;
}
 .__select__label + input + .__select__label {
     border-top: 0 solid #c7ccd1 60;
}
 .__select__label:hover {
     background-color: #d8093a !important;
     color: #fff;
}

.flag span {
    font-weight: 600;
    font-size: 14px;
    margin-right: 10px;
}
 
.flag img {
    width: 26px;
    height: 18px;
}

@media (max-width: 1200px) {
    .img {
        min-width: 460px;
    }


    h1 {
        padding: 20px !important;
    }

    .img span {
        
        padding: 0 0 20px 20px !important;
    }
}
<!doctype html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/clear.css" rel="stylesheet" type="text/css" />
    <link href="css/adaptive.css" rel="stylesheet" type="text/css" />
    <script src="js/js.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
    <title>Редуслим</title>
</head>

<body>
    <div class="wrapper">
        <div class="item">
            <div class="col img">
                <div class="img-info">
                    <h1>Reduslim</h1>
                    <span>eco</span>
                </div>
                <img src="img/tablets.webp" alt="tablets">
            </div>
            <div class="col form-block">
                <div class="title">
                    <h2>Сделай шаг<br>к выздоровлению</h2>
                </div>
                <form action="#" method="post">
                    <label for="name">ваше <span class="green">имя</span></label>
                    <input type="text" name="user_name" required id="name" placeholder="Алексей">
                    <div class="phone-block">
                        <div class="number">
                            <label for="phone">ваш <span class="green">телефон</span></label>
                            <input type="text" name="user_phone" required id="phone" placeholder="+7 (123) 456 78-90">
                        </div>
                        <div class="__select" data-state="">
                            <div class="__select__title flag" data-default="Option 0">
                                <span>RU</span>
                                <img src="img/ru.svg" alt="ru">
                            </div>
                            <div class="__select__content">
                                <input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked />
                                <label for="singleSelect0" class="__select__label">
                                </label>
                                <input id="singleSelect1" class="__select__input" type="radio" name="singleSelect" />
                                <label for="singleSelect1" class="__select__label flag">
                                    <span>GR</span>
                                    <img src="img/gr.svg" alt="gr">
                                </label>
                                <input id="singleSelect3" class="__select__input" type="radio" name="singleSelect" />
                                <label for="singleSelect3" class="__select__label flag">
                                    <span>UK</span>
                                    <img src="img/uk.svg" alt="">
                                </label>
                                <input id="singleSelect4" class="__select__input flag" type="radio" name="singleSelect" />
                                <label for="singleSelect4" class="__select__label flag">
                                    <span>RU</span>
                                    <img src="img/ru.svg" alt="ru">
                                </label>
                            </div>
                        </div>
                    </div>
                    <button>Заказать<i class="fas fa-arrow-right"></i></button>
                </form>
            </div>
        </div>
    </div>
</body>

0

1 ответ 1

0

Причина в том что при клике на элемент с img который не имеет текста evt.target.textContent будет равен "".

Решения:

  1. либо прописать какие-то данные картинке (через дата аттрибут) чтобы их извелекать,

  2. либо картинку отрисовывать через псевдоэлемент after поверх спана с текстом чтобы ее не было в DOM дереве.

  3. самый ленивый, предоставленный ниже (вместо evt.target.textContent использовать evt.currentTarget.textContent) об этом свойстве многие забывают

const selectSingle = document.querySelector('.__select');
    const selectSingle_title = selectSingle.querySelector('.__select__title');
    const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');

    // Toggle menu
    selectSingle_title.addEventListener('click', () => {
        if ('active' === selectSingle.getAttribute('data-state')) {
            selectSingle.setAttribute('data-state', '');
        } else {
            selectSingle.setAttribute('data-state', 'active');
        }
    });

    // Close when click to option
    for (let i = 0; i < selectSingle_labels.length; i++) {
        selectSingle_labels[i].addEventListener('click', (evt) => {
            selectSingle_title.textContent = evt.currentTarget.textContent;
            selectSingle.setAttribute('data-state', '');
        });
    }
html,
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    scroll-behavior: smooth;
    background-color: #E5E5E5;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1280px;
    padding: 40px 80px;
    box-sizing: border-box;
    margin: 0 auto;
}

.item {
    display: flex;
    justify-content:  space-between;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 24px 80px rgba(0, 0, 0, 0.1);
    border-radius: 1px;

}

.col {
    width: 50%;
    height:  100%;
}


.img {
    display: flex;
    position: relative;
    background: url(../img/big-bg.png) center no-repeat;
   background-size: 100% 100%;
    min-height:  500px;
    min-width: 560px;
}

.img img {
    position: absolute;
    left: 10px;
    right: 0;
    bottom: 42px;
    margin: auto;

}

.img-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}


h1 {
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    padding: 40px !important;
}

.img span {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    color: #fff;
    padding: 0 0 40px 40px;
}


.form-block {
    text-align: center;
}

.title {
    background-color: #F8F8F8;
    padding: 30px;
    border-radius: 30px;
}

h2 {
    font-weight: 800;
    font-size: 30px;
    color: #212121;
}


form {
    padding: 50px 100px !important;
}

label {
    text-transform: uppercase;
    text-align: left;
    width: 100%;
    font-weight: 800;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px !important;
}

.green {
    color: #428A60;
}



input {
    display: block;
    margin: 0 auto;
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
    border-radius: 5px !important;
    background: #F8F8F8;
    padding: 15px 20px;
    width: 100%;
    margin-bottom: 20px !important;
}



input::placeholder {
    font-weight: 600;
    font-size: 14px;
}

.phone-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}


.phone-block input {
    margin-bottom: 0 !important;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: #428A60;
    border-radius: 5px !important;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

button i {
    margin-left: 10px;
}

button:hover {
    background-color: #3BC374;
    color: #000;
}


 .__select {
     position: relative;
     width: 116px;
     height: 47px;
     margin: 0 auto;
}
 .__select[data-state="active"] .__select__title::before {
     transform: translate(-3px, -50%) rotate(-45deg);
}
 .__select[data-state="active"] .__select__title::after {
     transform: translate(3px, -50%) rotate(45deg);
}
 .__select[data-state="active"] .__select__content {
     opacity: 1;
}
 .__select[data-state="active"] .__select__label + .__select__input + .__select__label {
     max-height: 40px;
     border-top-width: 1px;
}
 .__select__title {
     display: flex;
     align-items: center;
     width: 100%;
     height: 100%;
     padding: 8px 16px;
     border-radius: 5px;
     border: solid 1px #c7ccd1;
     cursor: pointer;
     background: #F8F8F8;
}
 .__select__title::before, .__select__title::after {
     content: "";
     position: absolute;
     top: 50%;
     right: 16px;
     display: block;
     width: 10px;
     height: 2px;
     transition: all 0.3s ease-out;
     background-color: #333;
     transform: translate(-3px, -50%) rotate(45deg);
}
 .__select__title::after {
     transform: translate(3px, -50%) rotate(-45deg);
}
 .__select__title:hover {
     border-color: #d8093a;
}
 .__select__title:hover::before, .__select__title:hover::after {
     background-color: #d8093a;
}
 .reset {
     display: flex;
     width: 230px;
     padding: 8px 16px;
     margin: 0 auto;
     margin-bottom: 10px;
     border: solid 1px #c7ccd1;
     border-radius: 5px;
     transition: all 0.2s ease-out;
     cursor: pointer;
     font-weight: bold;
     background-color: #fff;
     color: #333;
}
 .reset:hover {
     background-color: #d8093a;
     color: #fff;
}
 .__select__content {
     position: absolute;
     top: 40px;
     right: 0;
     left:  0;
     display: flex;
     flex-direction: column;
     background-color: #fff;
     border: 1px solid #c7ccd1;
     border-top: none;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     transition: all 0.3s ease-out;
     opacity: 0;
     z-index: 8;
}
 .__select__input {
     display: none;
}
 .__select__input:checked + label {
     background-color: #dedede;
}
 .__select__input:disabled + label {
     opacity: 0.6;
     pointer-events: none;
}
 .__select__label {
     display: flex;
     align-items: center;
     width: 100%;
     height: 40px;
     max-height: 0;
     padding: 0 16px;
     transition: all 0.2s ease-out;
     cursor: pointer;
     overflow: hidden;
}
 .__select__label + input + .__select__label {
     border-top: 0 solid #c7ccd1 60;
}
 .__select__label:hover {
     background-color: #d8093a !important;
     color: #fff;
}

.flag span {
    font-weight: 600;
    font-size: 14px;
    margin-right: 10px;
}
 
.flag img {
    width: 26px;
    height: 18px;
}

@media (max-width: 1200px) {
    .img {
        min-width: 460px;
    }


    h1 {
        padding: 20px !important;
    }

    .img span {
        
        padding: 0 0 20px 20px !important;
    }
}
<!doctype html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/clear.css" rel="stylesheet" type="text/css" />
    <link href="css/adaptive.css" rel="stylesheet" type="text/css" />
    <script src="js/js.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
    <title>Редуслим</title>
</head>

<body>
    <div class="wrapper">
        <div class="item">
            <div class="col img">
                <div class="img-info">
                    <h1>Reduslim</h1>
                    <span>eco</span>
                </div>
                <img src="img/tablets.webp" alt="tablets">
            </div>
            <div class="col form-block">
                <div class="title">
                    <h2>Сделай шаг<br>к выздоровлению</h2>
                </div>
                <form action="#" method="post">
                    <label for="name">ваше <span class="green">имя</span></label>
                    <input type="text" name="user_name" required id="name" placeholder="Алексей">
                    <div class="phone-block">
                        <div class="number">
                            <label for="phone">ваш <span class="green">телефон</span></label>
                            <input type="text" name="user_phone" required id="phone" placeholder="+7 (123) 456 78-90">
                        </div>
                        <div class="__select" data-state="">
                            <div class="__select__title flag" data-default="Option 0">
                                <span>RU</span>
                                <img src="img/ru.svg" alt="ru">
                            </div>
                            <div class="__select__content">
                                <input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked />
                                <label for="singleSelect0" class="__select__label">
                                </label>
                                <input id="singleSelect1" class="__select__input" type="radio" name="singleSelect" />
                                <label for="singleSelect1" class="__select__label flag">
                                    <span>GR</span>
                                    <img src="img/gr.svg" alt="gr">
                                </label>
                                <input id="singleSelect3" class="__select__input" type="radio" name="singleSelect" />
                                <label for="singleSelect3" class="__select__label flag">
                                    <span>UK</span>
                                    <img src="img/uk.svg" alt="">
                                </label>
                                <input id="singleSelect4" class="__select__input flag" type="radio" name="singleSelect" />
                                <label for="singleSelect4" class="__select__label flag">
                                    <span>RU</span>
                                    <img src="img/ru.svg" alt="ru">
                                </label>
                            </div>
                        </div>
                    </div>
                    <button>Заказать<i class="fas fa-arrow-right"></i></button>
                </form>
            </div>
        </div>
    </div>
</body>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.