Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2021, 16:03
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

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

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

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

https://jsfiddle.net/1et7jv5x/
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2021, 16:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,180

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

и загрузка в песочнице, в блоке HTML, строка 1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
ненужна и даже вредна, если в блоке скриптов уже выбрана загрузка JavaScript + jQuery 3.4.1

Последний раз редактировалось рони, 18.02.2021 в 16:37.
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2021, 16:40
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Сообщение от рони Посмотреть сообщение
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, 17:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,180

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 из начала клика,в другое место, в конец клика.

Последний раз редактировалось рони, 18.02.2021 в 17:32.
Ответить с цитированием
  #5 (permalink)  
Старый 19.02.2021, 00:59
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Сообщение от рони Посмотреть сообщение
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- жмем кнопку
Результат: инпут подсвечивается, будто он пустой. Хотя он не пустой
Ответить с цитированием
  #6 (permalink)  
Старый 19.02.2021, 05:52
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Сообщение от рони Посмотреть сообщение
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, 08:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,180

create Map смена вкладок без смены элементов
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>

Последний раз редактировалось рони, 19.02.2021 в 08:18.
Ответить с цитированием
  #8 (permalink)  
Старый 19.02.2021, 10:29
Аспирант
Отправить личное сообщение для shareware Посмотреть профиль Найти все сообщения от shareware
 
Регистрация: 04.11.2019
Сообщений: 32

Сообщение от рони Посмотреть сообщение
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>
Спасибо за такой вариант!
Попробую еще что-нибудь придумать..не выйдет, воспользуюсь Вашим ))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как узнать, float или int значение присвоено переменной? gadyuka Общие вопросы Javascript 4 30.10.2012 13:31
Посоветуйте самоучитель или обучающий сайт или видео курсы Seva1986 (X)HTML/CSS 14 26.01.2012 20:03
Это баг do{}while или что? regesh jQuery 10 14.02.2010 23:28
Баг с jpeg в ie6 JsLoveR Элементы интерфейса 20 28.01.2010 19:57
Странность при вычислении выражений.. Это баг или фича? krvwd Общие вопросы Javascript 9 28.01.2009 17:04