Раздельное выполнение функций - JavaScript, Ajax

spoon100500 · 22.10.2016, 08:25

Как реализовать вот такой пример, строго не судите, тут только задумка реализации:

Код HTML:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
 
    <select name="combobox1" size="1" id="c">
        <option value="500">А</option>
        <option value="520">Б</option>
      </select>
      
    <select name="combobox2" size="1" id="d">
        <option value="520">В</option>
        <option value="560">Г</option>
     </select>
        
    <select name="combobox3" size="1" id="g">   
        <option value="650">Д</option>
        <option value="700">Е</option>
    </select>
    
    <select name="combobox4" size="1" id="f">   
        <option value="750">Ж</option>
        <option value="800">З</option>
    </select>
 
    <input type="number" id="a" name="indexEditbox1" value="0">
    <input type="number" id="b" name="indexEditbox1" value="0">
    
    <input type="button" id="button1" value="Первая функция">
    <input type="button" id="button2" value="Вторая функция">
    <input type="button" id="button3" value="Третья функция">
    
    <div id="rezult" class="style3">
        <span style="color:#00FF00;font-family:'Times New Roman';font-size:21px;">
            <strong><em>Результат</em></strong>
        </span>
    </div>

<script>
 
var
a,
b,
c,
d,
g,
f,
rezult;
 
function myFunc1(){
rezult = (a * b * c)
}
 
function myFunc2(){
rezult = (a * b * d + g)
}
 
function myFunc3(){
rezult = (a * b * f)
}
 
var button1
button1.onclick = function Click1 () {
a.addEventListener('blur', myFunc1.bind());
b.addEventListener('blur', myFunc1.bind());
с.addEventListener('blur', myFunc1.bind());
}
 
var button2
button2.onclick = function Click2 (){
a.addEventListener('blur', myFunc2.bind());
b.addEventListener('blur', myFunc2.bind());
d.addEventListener('blur', myFunc2.bind());
g.addEventListener('blur', myFunc2.bind());
}
 
var button3
button3.onclick = function Click3 (){
a.addEventListener('blur', myFunc3.bind());
b.addEventListener('blur', myFunc3.bind());
f.addEventListener('blur', myFunc3.bind());
}
</script>
</body>
</html>

Может, конечно, наверное и компактнее все прописать, ну как умею)))
Что хочу: нажали button1, переменные a, b, c, выполняют формулу в функции myFunc1(), нажали button2 значения обнуляются и выполняют переменные a, b, d, g, формулу в функции myFunc2() и т. д.

pompiduskus · 22.10.2016, 20:05

То что мы в прошлый раз тут все вместе обсуждали, видимо у тебя не отобралисоь на страницу. Или твой браузер специально, не показывает тебе что тут пишут ?

Яж говорю, ты в саму суть не въезжаешь. Главное понять один раз что к чемую А потом все время будет одно итоже. А ты просто так от балды пишешь что-то. сам даже не понимаешь что пишешь.

А программа, как известно работает так как есй сказали !

Вот тебе пример, разбирись с ним. Что не понятно спрашивай, только вникай в суть, а не просто copy/paste.

PHP код:


			

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">

        .style3{
            margin-top: 20px;
            color: #000; font-family: 'Times New Roman'; font-size: 21px;
        }

        .ctr{
            color: #F00; padding: 3px 10px;
        }

    </style>

    <script type="text/javascript">

    function byId(id){ return document.getElementById(id); }
        
        // -------------------------------------------------------
        var intp_a, intp_b;
        var sel_c, sel_d, sel_e, sel_f;
        var rezult = 0;
        var rezult_output = 0;

        var a,b,c,d,a;

        // -------------------------------------------------------
        window.addEventListener('load', function(){

            intp_a = byId('intp_a');
            intp_b = byId('intp_b');
            sel_c = byId('sel_c');
            sel_d = byId('sel_d');
            sel_e = byId('sel_e');
            sel_f = byId('sel_f');

            rezult_output = byId('rezult_output');

            byId('button1').onclick = myFunc1;
            byId('button2').onclick = myFunc2;
            byId('button3').onclick = myFunc3;

        });

        // -------------------------------------------------------
        function getValues(){

            a = parseInt( intp_a.value );
            b = parseInt( intp_b.value );

            c = parseInt( sel_c.value );
            d = parseInt( sel_d.value );
            e = parseInt( sel_e.value );
            f = parseInt( sel_f.value );

        }

        function printValues(){ 
            var out = '<b>Результат</b>: ["<span class="ctr">'+rezult+'</span>"]';
            rezult_output.innerHTML = out;
            console.log( out );
        }

        // -------------------------------------------------------
        function myFunc1() { 
            getValues(); rezult = (a * b * c); printValues();

        }
        
        function myFunc2() { 
            getValues(); rezult = (a * b * d + e);  printValues();
        }
        
        function myFunc3() { 
            getValues(); rezult = (a * b * f); printValues();
        }
        // -------------------------------------------------------


    </script>

</head>
 
<body>
 
    <select name="combobox1" size="1" id="sel_c">
        <option value="500">А</option>
        <option value="520">Б</option>
      </select>
      
    <select name="combobox2" size="1" id="sel_d">
        <option value="520">В</option>
        <option value="560">Г</option>
     </select>
        
    <select name="combobox3" size="1" id="sel_e">   
        <option value="650">Д</option>
        <option value="700">Е</option>
    </select>
    
    <select name="combobox4" size="1" id="sel_f">   
        <option value="750">Ж</option>
        <option value="800">З</option>
    </select>
 
    <input type="number" id="intp_a" name="indexEditbox1" value="0">
    <input type="number" id="intp_b" name="indexEditbox1" value="0">
    
    <input type="button" id="button1" value="Первая функция">
    <input type="button" id="button2" value="Вторая функция">
    <input type="button" id="button3" value="Третья функция">
    
    <div id="rezult_output" class="style3">
            Результат
    </div>

</body>
</html>

spoon100500 · 23.10.2016, 06:44

Цитата:

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

Яж говорю, ты в саму суть не въезжаешь. Главное понять один раз что к чемую А потом все время будет одно итоже. А ты просто так от балды пишешь что-то. сам даже не понимаешь что пишешь.
Вот тебе пример, разбирись с ним. Что не понятно спрашивай, только вникай в суть, а не просто copy/paste.

В том то и дело, когда напишут код понимаю как он работает, могу по полочкам рассказать, а как на писать не понимаю, это как понимать, что говорят по английски но самому не говорить))))
Сколько программистов, столько и вариантов решения одной и той же задачи, каждый решает по своему, как говорят есть 1001 способ решения одной задачи. У меня каша в голове капец)))
Может посоветуете, что почитать? какой схемы придерживаться?
За код спасибо огромное, всё просто блин

Как у вас так получается?)))

Не совсем понял как работает:
1) function byId(id){ return document.getElementById(id); }- с возращением не понимаю, у меня с ним совсем все плохо т.е. function byId возращает значения id, мы это делаем для того, чтобы каждой переменной не прописывать document.getElementById(" "); например document.getElementById("iintp_a"); ?

2) window.addEventListener('load', function()- т.е. как загрузиться DOM будут выполнятся функции function byId(id)?

Не сочтите за наглость, строжайше извиняюсь, я коряво объяснил видимо, как реализовать расчет одной кнопкой? Если есть возможность то ввиде изучения т.е. я пишу вариант реализации вы указываете на ошибки?
Просто у меня кнопки button1, button2, button3 отвечают за показ и скрытие слоёв, а расчет результата одна кнопка на все три функции? Можно, конечно, расчет привязать и к этим кнопкам но наверное можно реализовать одной кнопкой?

Как я понимаю через цикл for и условие if, в цикле определяем какая из button1, button2, button3 нажата, потом выполняется условие, если button1 выполняется myFunc1, если butto2 выполняется myFunc2 и т.д. и только в этом случае при нажатии на кнопку Расчет выполняется та или иная функция.

Alex11223 · 23.10.2016, 10:41

Цитата:

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

Может посоветуете, что почитать?

Советовали ж, учебник по JS.
Например https://learn.javascript.ru/first-steps

spoon100500 · 23.10.2016, 11:01

Его и читаю, вдоль и поперек използал. Я так понял, каждый работает в своём стиле?
Как то ведь он к этому пришел? Может конкретная литература навила?

Alex11223 · 23.10.2016, 11:18

К чему пришел? О каком именно стиле речь?

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

spoon100500 · 23.10.2016, 11:22

Цитата:

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

К чему пришел? О каком именно стиле речь?

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

Этот вариант безусловно простой, я уже месяца два как пытаюсь что то понять))) Одно и то же решение видел как минимум в трех вариантах, в каждом пытаешься разобраться. В этом варианте код можно гораздо массивнее написать, раза так в два, так ведь?

Пока ни к чему ни пришел))) Я из тех кому надо разжовывать. Хорошо бы прийти к чему то)))

Пепел Феникса · 23.10.2016, 12:36

Цитата:

1) function byId(id){ return document.getElementById(id); }- с возращением не понимаю, у меня с ним совсем все плохо т.е. function byId возращает значения id, мы это делаем для того, чтобы каждой переменной не прописывать document.getElementById(" "); например document.getElementById("iintp_a"); ?

да чтоб не писать каждый раз document.get...
просто сокращение, удобство

Цитата:

2) window.addEventListener('load', function()- т.е. как загрузиться DOM будут выполнятся функции function byId(id)?

нет, выполнится то что передано вторым аргументом.
(кстати не в одном из кодов в этой теме этого не вижу)

Цитата:

Не сочтите за наглость, строжайше извиняюсь, я коряво объяснил видимо, как реализовать расчет одной кнопкой? Если есть возможность то ввиде изучения т.е. я пишу вариант реализации вы указываете на ошибки?
Просто у меня кнопки button1, button2, button3 отвечают за показ и скрытие слоёв, а расчет результата одна кнопка на все три функции? Можно, конечно, расчет привязать и к этим кнопкам но наверное можно реализовать одной кнопкой?

Как я понимаю через цикл for и условие if, в цикле определяем какая из button1, button2, button3 нажата, потом выполняется условие, если button1 выполняется myFunc1, если butto2 выполняется myFunc2 и т.д. и только в этом случае при нажатии на кнопку Расчет выполняется та или иная функция.

если нужен выбор одного их нескольких, тут может radio-box'ы тогда поставить, а не кнопки.
да и с кнопками, просто запомните какая кнопка была последней.
а можно вообще привязать функцию к кнопке, потом когда кнопка нажата, она свою функцию сохранит в переменную и мы из кнопки расчета будет вызывать функцию через переменную.

вариантов написания много.

pompiduskus · 23.10.2016, 12:40

Просто практикуй и пытайся понять что происходит. Вообще иногда люди пишу на каком то очень простом языке, очень сложные вещи, на первый взгляд.

А все потому что они пишут в голове, а язык просто им дает возможность выразить это.

spoon100500 · 23.10.2016, 12:48

Цитата:

Сообщение от Пепел Феникса

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

Если правильно понял, одна переменная для всех трех функций т.е. мы её будем перезаписывать каждый раз при нажатии кнопок button1, button2, button3 и вызывать эту переменную кнопкой Расчет?

22.10.2016, 20:05	#2
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	То что мы в прошлый раз тут все вместе обсуждали, видимо у тебя не отобралисоь на страницу. Или твой браузер специально, не показывает тебе что тут пишут ? Яж говорю, ты в саму суть не въезжаешь. Главное понять один раз что к чемую А потом все время будет одно итоже. А ты просто так от балды пишешь что-то. сам даже не понимаешь что пишешь. А программа, как известно работает так как есй сказали ! Вот тебе пример, разбирись с ним. Что не понятно спрашивай, только вникай в суть, а не просто copy/paste. PHP код: <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .style3{ margin-top: 20px; color: #000; font-family: 'Times New Roman'; font-size: 21px; } .ctr{ color: #F00; padding: 3px 10px; } </style> <script type="text/javascript"> function byId(id){ return document.getElementById(id); } // ------------------------------------------------------- var intp_a, intp_b; var sel_c, sel_d, sel_e, sel_f; var rezult = 0; var rezult_output = 0; var a,b,c,d,a; // ------------------------------------------------------- window.addEventListener('load', function(){ intp_a = byId('intp_a'); intp_b = byId('intp_b'); sel_c = byId('sel_c'); sel_d = byId('sel_d'); sel_e = byId('sel_e'); sel_f = byId('sel_f'); rezult_output = byId('rezult_output'); byId('button1').onclick = myFunc1; byId('button2').onclick = myFunc2; byId('button3').onclick = myFunc3; }); // ------------------------------------------------------- function getValues(){ a = parseInt( intp_a.value ); b = parseInt( intp_b.value ); c = parseInt( sel_c.value ); d = parseInt( sel_d.value ); e = parseInt( sel_e.value ); f = parseInt( sel_f.value ); } function printValues(){ var out = '<b>Результат</b>: ["<span class="ctr">'+rezult+'</span>"]'; rezult_output.innerHTML = out; console.log( out ); } // ------------------------------------------------------- function myFunc1() { getValues(); rezult = (a * b * c); printValues(); } function myFunc2() { getValues(); rezult = (a * b * d + e); printValues(); } function myFunc3() { getValues(); rezult = (a * b * f); printValues(); } // ------------------------------------------------------- </script> </head> <body> <select name="combobox1" size="1" id="sel_c"> <option value="500">А</option> <option value="520">Б</option> </select> <select name="combobox2" size="1" id="sel_d"> <option value="520">В</option> <option value="560">Г</option> </select> <select name="combobox3" size="1" id="sel_e"> <option value="650">Д</option> <option value="700">Е</option> </select> <select name="combobox4" size="1" id="sel_f"> <option value="750">Ж</option> <option value="800">З</option> </select> <input type="number" id="intp_a" name="indexEditbox1" value="0"> <input type="number" id="intp_b" name="indexEditbox1" value="0"> <input type="button" id="button1" value="Первая функция"> <input type="button" id="button2" value="Вторая функция"> <input type="button" id="button3" value="Третья функция"> <div id="rezult_output" class="style3"> Результат </div> </body> </html> <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

23.10.2016, 11:01	#5
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	Его и читаю, вдоль и поперек използал. Я так понял, каждый работает в своём стиле? Как то ведь он к этому пришел? Может конкретная литература навила? Еду медленно, но верно!

23.10.2016, 11:18	#6
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	К чему пришел? О каком именно стиле речь? Тут же просто выполняются какие-то действия (после загрузке страницы получить все элементы, повесить на кнопки обработчики клика, в них получать и выводить числа из полей ввода) самым простым способом. Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

23.10.2016, 12:40	#9
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	Просто практикуй и пытайся понять что происходит. Вообще иногда люди пишу на каком то очень простом языке, очень сложные вещи, на первый взгляд. А все потому что они пишут в голове, а язык просто им дает возможность выразить это. <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Слитное/раздельное написание знаков препинания	newerow1989	Свободное общение	4	26.06.2015 11:30
Sleep останавливает выполнение всего в программе а не задерживает выполнение конкретного куска кода?	Illusiony	Общие вопросы Delphi	19	22.02.2015 18:37
Раздельное сворачивание форм	Shouldercannon	Общие вопросы Delphi	6	09.09.2014 14:16
Раздельное оформление в Social Engine 4	Green4el	WordPress и другие CMS	1	14.01.2013 14:35
как прервать выполнение всех функций которые были запущены setTimeout	Arassir	JavaScript, Ajax	1	20.10.2011 16:20