Форум

shareware · #1 (**permalink**) 18.02.2021, 17:03

Добрый день.
Столкнулся с такой ситуацией. Использую коллекцию типа Map + вкладки.

Так вот, когда я переключаю вкладки, то я меняю атрибут 2х текстовых полей. Когда я ввожу информацию только в 1 поле, жму проверить, потом переключаюсь на другую вкладку и ввожу значение в то же поле, то оно подсвечивается, а в коллекцию map добавляется откуда-то взявшееся значение старого input'a (по старому, удаленному атрибуту). Уже все что мог перепробовал... решение так и не нашел. Может я что-то делаю неправильно, подскажите

p.s. в консоль наглядно выводится, что коллекция map в таком случае откуда то вдруг содержит 4 элемента, вместо 3х
Не ругайтесь, если неправильно выбрал тему

https://jsfiddle.net/1et7jv5x/

рони · #2 (**permalink**) 18.02.2021, 17:35

shareware,
подожду переводчика, но на всякий случай

и загрузка в песочнице, в блоке HTML, строка 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ненужна и даже вредна, если в блоке скриптов уже выбрана загрузка JavaScript + jQuery 3.4.1

shareware · #3 (**permalink**) 18.02.2021, 17:40

Сообщение от рони

shareware,
подожду переводчика, но на всякий случай

и загрузка в песочнице, в блоке HTML, строка 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ненужна и даже вредна, если в блоке скриптов уже выбрана загрузка JavaScript + jQuery 3.4.1

Хм..Попробую проще объяснить )

По шагам:
1 - вводим любое значение в первый инпут
2 - переключаем вкладку
3 - вводим любое значение в первый инпут
4 - переключаем вкладку
5 - видим в консоли, что map.size = 4, вместо 3х

Про <script..> видимо копипастнул случайно )

рони · #4 (**permalink**) 18.02.2021, 18:23

shareware,
3 - вводим любое значение в первый инпут
4 - переключаем вкладку
5 - видим в консоли, что map.size = 4, вместо 3х --- а кто стирал пункт номер три? строка 8

$('input[type=text]').on('keyup keydown paste', function(){
        getid = $(this).data('id');

*!*
        map.set(getid,$(this).val());
 */!*       
$(this).removeClass('error');
    });

обнуление предыдущих данных в вашем коде идёт после клика по выбору таба, забить или перенести console.log из начала клика,в другое место, в конец клика.

shareware · #5 (**permalink**) 19.02.2021, 01:59

Сообщение от рони

shareware,
3 - вводим любое значение в первый инпут
4 - переключаем вкладку
5 - видим в консоли, что map.size = 4, вместо 3х --- а кто стирал пункт номер три? строка 8

$('input[type=text]').on('keyup keydown paste', function(){
        getid = $(this).data('id');

*!*
        map.set(getid,$(this).val());
 */!*       
$(this).removeClass('error');
    });

обнуление предыдущих данных в вашем коде идёт после клика по выбору таба, забить или перенести console.log из начала клика,в другое место, в конец клика.

Это только полбеды. Теперь следующие действия
1 - вводим значение в инпут
2 - жмем кнопку
3 - переключаем вкладку
4 - вводим значение в тот же инпут
5- жмем кнопку
Результат: инпут подсвечивается, будто он пустой. Хотя он не пустой

shareware · #6 (**permalink**) 19.02.2021, 06:52

Сообщение от рони

shareware,
3 - вводим любое значение в первый инпут
4 - переключаем вкладку
5 - видим в консоли, что map.size = 4, вместо 3х --- а кто стирал пункт номер три? строка 8

$('input[type=text]').on('keyup keydown paste', function(){
        getid = $(this).data('id');

*!*
        map.set(getid,$(this).val());
 */!*       
$(this).removeClass('error');
    });

обнуление предыдущих данных в вашем коде идёт после клика по выбору таба, забить или перенести console.log из начала клика,в другое место, в конец клика.

Еще вопрос..а что значит "а кто стирал пункт номер три? строка 8"

рони · #7 (**permalink**) 19.02.2021, 09:11

shareware,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
     .prepare ul li:not(:nth-child(1)){
        margin-left: 10px;
    }
    .prepare ul{
        justify-content: center;
        display: flex;
    }
    .prepare ul li{
        list-style: none;
        padding: 10px 0;
        transition: all .3s;
        cursor: pointer;
        color: rgb(0 0 0 / 47%);
    }
    .prepare ul li.active{
        box-shadow: 0 2px 0 0px #0000ee;
        color: black;
    }
    .prepare ul li:hover{
        list-style: none;
        box-shadow: 0 2px 0 0px #0000ee;
        color: black;
    }
    .error-block{
        text-align: center;
    }
    .error-block p{
        font-size: 14px;
        opacity: 0;
        color: red;
        transition: all .3s;
    }
    .error{
        box-shadow: inset 0 0 0 1px red;
    }
    </style>
    <script>
document.addEventListener("DOMContentLoaded", function() {
    let map;
    let txt = [
        ['Введите серию документа', 'Введите номер документа'],
        ['Программа обучения', 'Введите ФИО']
    ];
    let mode = ['seria_number', 'fio_po'];
    let key = [
        ['document', 'seria'],
        ['po', 'fio']
    ];
    let parent = document.querySelector('.prepare');
    let label = parent.querySelectorAll('.input-label')
    let inputs = parent.querySelectorAll('input.custom-input');
    let li = parent.querySelectorAll('li.mode');
    let errBlock = document.querySelector('.error-block p');
    let btn = document.querySelector('.send-btn');
    let current = 0;
    let err = false;
    const errorHandler = _ => {
        err = false;
        inputs.forEach(el => {
        let er = !el.value.trim();
        el.classList.toggle('error', er);
        if(er) err = true;
        } )
        errBlock.style.opacity = +err;
        return !err;
    }
    const reset = _ => {
        inputs.forEach(el => (el.value = '', el.classList.remove('error')));
        label.forEach((el, i) => el.textContent = txt[current][i]);
        errBlock.style.opacity = 0;
        err = false;
        map.clear();
    }
    const createMap = _ => {
        if(err) errorHandler();
        let ar = key[current].map((k, i) => [k, inputs[i].value]);
        map = new Map(ar)
        map.set('mode', mode[current]);
        console.log(map)
    }
    parent.addEventListener('click', ({
        target
    }) => {
        if (target = target.closest('li.mode')) {
            li[current].classList.remove('active');
            current = [...li].indexOf(target);
            li[current].classList.add('active');
            reset()
        }
    })
    parent.addEventListener('input', createMap);
    btn.addEventListener('click', errorHandler);
    createMap();
});
</script>
</head>
<body>
    <div class="prepare">
        <ul>
            <li class="mode active">Поиск по серии и номеру документа</li>
            <li class="mode" >Поиск по ФИО и программе обучения</li>
        </ul>
    <div class="error-block">
            <p>Исправьте то, что обведено красным</p>
        </div>
        <div class="d-flex center-flex">
            <div class="prepare-block">
                <p class="input-label">Введите номер документа</p>
                <input type="text" class="custom_one custom-input" value="" placeholder="xxxxxx">
            </div>
            <div class="prepare-block">
                <p class="input-label">Введите серию документа</p>
                <input type="text" class="custom_two custom-input" value="" placeholder="xxxxxx">
            </div>
        </div>
    </div>
    <button class="send-btn">test</button>
</body>
</html>

shareware · #8 (**permalink**) 19.02.2021, 11:29

Сообщение от рони

shareware,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
     .prepare ul li:not(:nth-child(1)){
        margin-left: 10px;
    }
    .prepare ul{
        justify-content: center;
        display: flex;
    }
    .prepare ul li{
        list-style: none;
        padding: 10px 0;
        transition: all .3s;
        cursor: pointer;
        color: rgb(0 0 0 / 47%);
    }
    .prepare ul li.active{
        box-shadow: 0 2px 0 0px #0000ee;
        color: black;
    }
    .prepare ul li:hover{
        list-style: none;
        box-shadow: 0 2px 0 0px #0000ee;
        color: black;
    }
    .error-block{
        text-align: center;
    }
    .error-block p{
        font-size: 14px;
        opacity: 0;
        color: red;
        transition: all .3s;
    }
    .error{
        box-shadow: inset 0 0 0 1px red;
    }
    </style>
    <script>
document.addEventListener("DOMContentLoaded", function() {
    let map;
    let txt = [
        ['Введите серию документа', 'Введите номер документа'],
        ['Программа обучения', 'Введите ФИО']
    ];
    let mode = ['seria_number', 'fio_po'];
    let key = [
        ['document', 'seria'],
        ['po', 'fio']
    ];
    let parent = document.querySelector('.prepare');
    let label = parent.querySelectorAll('.input-label')
    let inputs = parent.querySelectorAll('input.custom-input');
    let li = parent.querySelectorAll('li.mode');
    let errBlock = document.querySelector('.error-block p');
    let btn = document.querySelector('.send-btn');
    let current = 0;
    let err = false;
    const errorHandler = _ => {
        err = false;
        inputs.forEach(el => {
        let er = !el.value.trim();
        el.classList.toggle('error', er);
        if(er) err = true;
        } )
        errBlock.style.opacity = +err;
        return !err;
    }
    const reset = _ => {
        inputs.forEach(el => (el.value = '', el.classList.remove('error')));
        label.forEach((el, i) => el.textContent = txt[current][i]);
        errBlock.style.opacity = 0;
        err = false;
        map.clear();
    }
    const createMap = _ => {
        if(err) errorHandler();
        let ar = key[current].map((k, i) => [k, inputs[i].value]);
        map = new Map(ar)
        map.set('mode', mode[current]);
        console.log(map)
    }
    parent.addEventListener('click', ({
        target
    }) => {
        if (target = target.closest('li.mode')) {
            li[current].classList.remove('active');
            current = [...li].indexOf(target);
            li[current].classList.add('active');
            reset()
        }
    })
    parent.addEventListener('input', createMap);
    btn.addEventListener('click', errorHandler);
    createMap();
});
</script>
</head>
<body>
    <div class="prepare">
        <ul>
            <li class="mode active">Поиск по серии и номеру документа</li>
            <li class="mode" >Поиск по ФИО и программе обучения</li>
        </ul>
    <div class="error-block">
            <p>Исправьте то, что обведено красным</p>
        </div>
        <div class="d-flex center-flex">
            <div class="prepare-block">
                <p class="input-label">Введите номер документа</p>
                <input type="text" class="custom_one custom-input" value="" placeholder="xxxxxx">
            </div>
            <div class="prepare-block">
                <p class="input-label">Введите серию документа</p>
                <input type="text" class="custom_two custom-input" value="" placeholder="xxxxxx">
            </div>
        </div>
    </div>
    <button class="send-btn">test</button>
</body>
</html>

Спасибо за такой вариант!
Попробую еще что-нибудь придумать..не выйдет, воспользуюсь Вашим ))

Форум

Справочник

Discord чат

Курсы javascript