Проблемы с DOM или передачей параметров функции

@Wolver · Регистрация: 26.04.2015

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

Есть 2 гиперссылки, на клик по которым вызывается ф-ция Click, которая показывает или скрывает формочку my_form (не суть важно каким образом - по opacity, display=none или прочими вариантами).
На форме есть кнопка с id="btn". По клику на неё должна вызываться одна из соответствующих ф-ций обработчиков MyFunc1() и MyFunc2().
Вопрос, как мне узнать, какая гиперссылка сгенерировала появление моей формочки, чтобы скрипт смог понять какую из MyFunc выполнять?

HTML5
1
2
<li><a href="#" onclick="Click('my_form', '1')">1-я ссылка</a></li>
<li><a href="#" onclick="Click('my_form', '2')">2-я ссылка</a></li>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    function Click(param, id)
    {
        if((document.getElementById(param).style.opacity == '0')||(document.getElementById(param).style.opacity == ""))
            document.getElementById(param).style.opacity = '1';
        else
            document.getElementById(param).style.opacity = '0';
    }
 
    $( document ).ready(function() {
        $("#btn").click(
            function(){
                if(id==1)  //<-------тут не знаю как передать id
                    MyFunc1();
                if(id==2)  
                    MyFunc2();
                return false;
            }
        );
    });

@Egor.S · 29.03.2019, 14:32

Как вариант при загрузке перебрать ссылки и сделать что-то вроде этого

JavaScript
1
el.dataset.number = index;

@klopp · 29.03.2019, 15:38

можно например так

HTML5
1
2
3
4
5
6
7
8
  <li><a href="#" onclick="linkClick(form, '1')" >1-я ссылка</a></li>
    <li><a href="#" onclick="linkClick(form, '2')">2-я ссылка</a></li>
 
    <form action="" id="form" class="formHidden" name="">
      <input type="">
      <input type="">
      <button onclick="btnClick(form.name)">Push</button>
    </form>

CSS
1
2
3
.formHidden {
    display: none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let form = document.getElementById('form');
let btn = form.querySelector('button');
let linkClick = (el, str) => {
    el.classList.remove('formHidden');
    el.name = str;
}
 
let MyFunc1 = () => console.log('MyFunc1()');
let MyFunc2 = () => console.log('MyFunc2()');
let btnClick = (str) => {
    if(str == 1) MyFunc1();
    if(str == 2) MyFunc2();
    form.classList.add('formHidden');
}

@Wolver · 05.04.2019, 03:59 **[ТС]**

Благодарю, klopp.
В общем переработал ваш пример адаптируя под свой код, заодно вернул изначальное сокрытие через display='none', а не opacity.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <li><a href="#" onclick="Click('login_page', 'block', form, '1')">Enter</a></li>
    <li><a href="#" onclick="Click('login_page', 'block', form, '2')">Registration</a></li>
...
    <div id="login_page">
        <div class="form">
            <form id="login_form" action="#" method="get">
                <input type="text" name="login" placeholder="Enter your login" autocomplete="login"/>
                <input type="password" name="pass" placeholder="Enter your password" autocomplete="password"/>
                <button type="submit" id="btn" value="Войти" name="log_in">Registration</button>
            </form>
        </div>
    </div>

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
30
31
32
 
    let my_login_page = document.getElementById('login_page'); //переменная для display = block/none div'a с id="login_page"
    let form = document.getElementById('login_form'); 
        function Click(param, block, el, str)
        {
            if ((document.getElementById(param).style.display == 'none') || (document.getElementById(param).style.display == ""))
            {
                document.getElementById(param).style.display = block;
                if (param == "login_page") {
                    //el.classList.remove('formHidden');  - удалено за ненадобностью
                    el.name = str;
                    my_login_page.style.display = 'block';
                    localStorage.setItem("my_str", str);
                }
            }
            else
                document.getElementById(param).style.display = 'none';
        }
 
        $( document ).ready(function() {
            $("#btn").click(
                function(){
                    let my_str = localStorage.getItem('my_str');
                   // localStorage.removeItem("my_str"); -  не забыть очистить но только не тут!
                    if (my_str == 1)
                        sendAjaxForm1('result_form', 'login_form', 'module_global_sendAJAX.php', this); //авторизация
                    if (my_str == 2)
                        sendAjaxForm('result_form', 'login_form', 'intro_ajax_form.php', this); //регистрация
                    return false;
                }
            );
        });

Единственное, что я так и не смог добиться адаптации вашей конструкции описания ф-ции (10-я стока js вашего примера)

JavaScript
1
let btnClick = (str) => {

для моих нужд и пришлось передавать переменную через localStorage и меня это жутко бесит!(((
Почему в JS нельзя так же гибко оперировать областью видимости переменных как в С++?
Собственно вопрос решён, всё работает, но, klopp, очень бы хотелось увидеть для общего развития код ф-ции onclick для #btn при условии, что её onclick не описан в самом теге, а должен находится в скрипте. Такое выполнимо?
Потому что если написать вот так:

JavaScript
1
2
3
4
5
6
    let btnClick = (str) => {
        if(str == 1)
            sendAjaxForm1('result_form', 'login_form', 'module_global_sendAJAX.php', this); //авторизация
        if(str == 2)
            sendAjaxForm('result_form', 'login_form', 'intro_ajax_form.php', this); //регистрация
    }

У меня почему-то AJAX-запросы перезагружают страницу! Оо

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

Проблемы с DOM или передачей параметров функции

Решение