Функция запускается в разные моменты в зависимости браузера, в чём проблема?

@Andrey_book · Регистрация: 28.02.2015

Студворк — интернет-сервис помощи студентам

Доброго дня суток!

Создал форму обратной связи для интернет-магазина, которая работает следующим образом:
Есть чекбоксы:

HTML5
1
2
3
4
5
...... 
<input type="checkbox" class="main" id="one" name="prokat" value="прокат калиброванный" onchange="fun1()" onclick="prokat4(this)"/>Прокат калиброванный<br> 
<input type="checkbox" class="main" id="one2" name="provoloka" value="проволока" onchange="fun1()" onclick="provoloka4(this)" />Проволока<br>
<input type="checkbox" class="main" id="one3" name="kanat" value="канаты" onchange="fun1()" onclick="kanat4(this)"/>Канаты<br>
.....

В зависимости от выбранного чекбокса выдаётся определённый <div> </div> с подсказкой

Ниже пример такой функции.

JavaScript
1
2
3
4
function prokat4 (box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById('div1').style.display = vis;
}

Всё это работает!

Сделал сохранение выбранных чекбоксов и данных в полях через куки файлы (тоясть после обновления страницы или нажатия кнопки "отправить" данные сохраняются в том числе и выбранные чекбоксы (галочки) сохраняются), это тоже работает.

Но столкнулся с тем, что после обновления (или нажатия кнопки "отправить") галочки сохраняются, но функция не выполняется (т.е. нужная подсказка и остальные поля не отрываются, пример подобной фунуции выше function prokat4 (box) )

Данную проблему решил следующим образом:

В боди написал код

HTML5
1
<body onload= "myFunc()">

и сама функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function myFunc() {
     var chbox, chbox1,chbox2,chbox3,chbox4,chbox5,chbox6;
chbox=document.getElementById('one');
chbox1=document.getElementById('one2');
chbox2=document.getElementById('one3');
chbox3=document.getElementById('one4');
chbox4=document.getElementById('one5');
chbox5=document.getElementById('one6');
chbox6=document.getElementById('one7');
        //alert(ch.checked);
        
    if (chbox.checked || chbox1.checked || chbox2.checked || chbox3.checked || chbox4.checked || chbox5.checked || chbox6.checked) {
          
       
fun1();             //функция для открытия стандартных полей после выбора любого из чекбоксов
prokat4(one);       // если выбран чекбокс прокат
provoloka4(one2);   // если выбран чекбокс проволока
kanat4(one3);       // если выбран чекбокс канат
// ................................................................
 
 
       alert('чекнута хотя бы одна галочка');
        //document.getElementById('div8').style.display = "block";
    }
    else {
         document.getElementById('div8').style.display = "none";
           alert ('Не выбран');
    }  
}

И это всё тоже работает, но только в некоторых браузерах, например в браузере
- Google Chrome работает как надо, т.е. если выбрана хотя бы одна галочка после перезагрузки выдаётся сообщение 'чекнута хотя бы одна галочка' и функция отработывает.

- Яндекс браузер (и некоторые браузере на телефонах), всегда выдают 'Не выбран', хотя выделение есть.

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

Про очередность загрузки читал, пробовал 4 различных способа, в том числе и тайминг, но это не помогает. Как можно сделать так, что бы во всех браузерах нормально работало и в случае перезагрузки страницы выполнялась вышеописанная функция?
Заранее благодарен!

@fixeri · 29.01.2020, 20:27

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .chs_blocks { display: none; background-color: green; }
    </style>
</head>
<body>
    <div class="chs">
        <input type="checkbox" data-id="div1">
        <input type="checkbox" data-id="div2">
        <input type="checkbox" data-id="div3">
    </div>
 
    <div class="chs_blocks" id="div1">div1</div>
    <div class="chs_blocks" id="div2">div2</div>
    <div class="chs_blocks" id="div3">div3</div>
 
    <script type="text/javascript">
        "use strict";
 
        let data = localStorage.getItem("chsData");
        let checkboxes = Array.from(document.querySelectorAll(".chs input[type='checkbox']"));
 
        document.getElementsByClassName("chs")[0].addEventListener("change", handleEventChxs);
 
        if(data) {
            let setD = getLocalData();
            checkboxes.filter((ch) => Array.from(setD).includes(ch.dataset.id)).forEach(ch => ch.click());
        } else {
            localStorage.setItem("chsData", JSON.stringify([]));
        }
 
        function handleEventChxs(e) {
            let ch = e.target;
            let setD = getLocalData();
 
            if (ch.checked) {
                setD.add(ch.dataset.id);
            } else {
                setD.delete(ch.dataset.id);
            }
            localStorage.setItem("chsData", JSON.stringify(Array.from(setD)));
            document.getElementById(ch.dataset.id).style.display = ch.checked ? "block" : "none";
        }
 
        function getLocalData() {
            return new Set(JSON.parse(localStorage.getItem("chsData")));    
        }
    </script>
</body>
</html>

@Andrey_book · 01.02.2020, 18:46 **[ТС]**

Спасибо! Разбираюсь!

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@Andrey_book 0 / 1 / 0 Регистрация: 28.02.2015 Сообщений: 48
	01.02.2020, 18:46 [ТС]
	Спасибо! Разбираюсь! 0