Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2016, 20:29
Аспирант
Отправить личное сообщение для allexmak Посмотреть профиль Найти все сообщения от allexmak
 
Регистрация: 13.12.2015
Сообщений: 45

цикл функций на кнопки
Помогите составить цикл и функцию на все кнопки GetButton(),
т.к будет очень много кнопок.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Button</title>
	<script>
var strLED1 = "", strLED2 = "", strLED3 = "";
var LED1_state = 0,LED2_state = 0,LED3_state = 0;

function GetButton1() {
  if (LED1_state === 1) {
    LED1_state = 0;
    strLED1 = "&LED1=0";
    document.getElementById("LED1").innerHTML = " OFF ";
    document.getElementById("ld1").innerHTML = "OFF";

  } else {
      LED1_state = 1;
      strLED1 = "&LED1=1";
      document.getElementById("LED1").innerHTML = " ON ";
      document.getElementById("ld1").innerHTML = "ON";
    }
  }

function GetButton2() {
  if (LED2_state === 1) {
    LED2_state = 0;
    strLED2 = "&LED2=0";
    document.getElementById("LED2").innerHTML = " OFF ";
    document.getElementById("ld2").innerHTML = "OFF";
  } else {
      LED2_state = 1;
      strLED2 = "&LED2=1";
      document.getElementById("LED2").innerHTML = " ON ";
      document.getElementById("ld2").innerHTML = "ON";
    }
}

function GetButton3() {
  if (LED3_state === 1) {
    LED3_state = 0;
    strLED3 = "&LED3=0";
    document.getElementById("LED3").innerHTML = " OFF ";
    document.getElementById("ld3").innerHTML = "OFF";
  } else {
      LED3_state = 1;
      strLED3 = "&LED3=1";
      document.getElementById("LED3").innerHTML = " ON ";
      document.getElementById("ld3").innerHTML = "ON";
    }
  }
	</script>
</head>
<body>
	<p>30: <button type="button" id="LED1" onclick="GetButton1()"> OFF </button> <span class="value" id="ld1">...</span></p>
    <p>31: <button type="button" id="LED2" onclick="GetButton2()"> OFF </button> <span class="value" id="ld2">...</span></p>
    <p>32: <button type="button" id="LED3" onclick="GetButton3()"> OFF </button> <span class="value" id="ld3">...</span></p>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2016, 01:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#led').addEventListener('click', function(e){
        var bt = e.target, f;
        while (bt.tagName != 'DIV') {
            if(bt.tagName == 'BUTTON') {
                f = bt.value ^ 1;
                bt.value = f; 
                bt.innerHTML = ['OFF', 'ON'][f];
                return;
            }
            bt = bt.parentNode;
        }
    });   
});
</script>    
</head>
 
<body>
<div id="led">
<p>30: <button id="LED1" value="0"> OFF </button> <span class="value">...</span></p>
    <p>31: <button id="LED2" value="0"> OFF </button> <span class="value">...</span></p>
    <p>32: <button id="LED3" value="0"> OFF </button> <span class="value">...</span></p></div>
 
</body>
</html>

Последний раз редактировалось laimas, 29.11.2016 в 03:08.
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2016, 12:08
Аспирант
Отправить личное сообщение для allexmak Посмотреть профиль Найти все сообщения от allexmak
 
Регистрация: 13.12.2015
Сообщений: 45

Интересное решение, теперь почему немогу вывести результат в .value, в чем проблема?


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#led').addEventListener('click', function(e){
        var bt = e.target, f;
        while (bt.tagName != 'DIV') {
            if(bt.tagName == 'BUTTON') {
                f = bt.value ^ 1;
                bt.value = f; 
                bt.innerHTML = ['OFF', 'ON'][f];

                var spa = document.querySelector(span);
                if (f===1) {document.getElementById(spa).innerHTML = "ON";}
                    else{ document.getElementById(spa).innerHTML = "OFF";}
                console.log(f);
                
                return;
            }
            bt = bt.parentNode;
        }
    });   
});
</script>    
</head>
 
<body>
<div id="led">
    <p>30: <button id="LED1" value="0"> OFF </button> <span class="value">...</span></p>
    <p>31: <button id="LED2" value="0"> OFF </button> <span class="value">...</span></p>
    <p>32: <button id="LED3" value="0"> OFF </button> <span class="value">...</span></p>
</div>
 
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2016, 13:23
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

allexmak,
А что это за танцы с бубном?
var spa = document.querySelector(span);
                if (f===1) {document.getElementById(spa).innerHTML = "ON";}
                    else{ document.getElementById(spa).innerHTML = "OFF";}

https://developer.mozilla.org/ru/doc.../querySelector
https://developer.mozilla.org/ru/doc...getElementById
Ответить с цитированием
  #5 (permalink)  
Старый 29.11.2016, 13:51
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от allexmak
теперь почему немогу вывести результат в .value, в чем проблема?
value чего?

PS. Я сознательно опустил и о span, ибо не понимаю зачем дублировать текст в соседнем элементе, и о strLED1, .... так как если &LED2=0 то может речь идет о формировании строки get-параметров и тогда лучше это делать иначе.

Но если уж так надо и в span дублировать, то достаточно изменить строку 12 кода так:

bt.innerHTML = bt.parentNode.querySelector('span').innerHTML =  ['OFF', 'ON'][f];


слишком много если

var spa = document.querySelector(span);
if (f===1) {document.getElementById(spa).innerHTML = "ON";}
else{ document.getElementById(spa).innerHTML = "OFF";}

Последний раз редактировалось laimas, 29.11.2016 в 14:05.
Ответить с цитированием
  #6 (permalink)  
Старый 29.11.2016, 15:54
Аспирант
Отправить личное сообщение для allexmak Посмотреть профиль Найти все сообщения от allexmak
 
Регистрация: 13.12.2015
Сообщений: 45

Спасибо, по поводу strLED1 = "&LED3=1" это действительно гет запросы
по этому нужно вывести эту переменную из функции, только для каждого нажатия своя.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
var strLED1 = "", strLED2 = "", strLED3 = "";//get запросы

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#led').addEventListener('click', function(e){
        var bt = e.target, f;
        while (bt.tagName != 'DIV') {
            if(bt.tagName == 'BUTTON') {
                f = bt.value ^ 1;
                bt.value = f; 
                bt.innerHTML = ['OFF', 'ON'][f];
                bt.innerHTML = bt.parentNode.querySelector('span').innerHTML =  ['OFF', 'ON'][f];

                if (f===1) {
                    strLED1 = "&LED1=1";
                } else {
                    strLED1 = "&LED1=0";    
                }

                return;
            }
            bt = bt.parentNode;
        }
    });   
});

 function emulatorGet (){
    console.log("<"+strLED1+"><"+strLED2+"><"+strLED3+">");
 }setInterval(emulatorGet, 1000);

</script>    
</head>
 
<body>
<div id="led">
    <p>30: <button id="LED1" value="0"> OFF </button> <span class="value">...</span></p>
    <p>31: <button id="LED2" value="0"> OFF </button> <span class="value">...</span></p>
    <p>32: <button id="LED3" value="0"> OFF </button> <span class="value">...</span></p>
</div>
 
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 29.11.2016, 22:47
Аспирант
Отправить личное сообщение для allexmak Посмотреть профиль Найти все сообщения от allexmak
 
Регистрация: 13.12.2015
Сообщений: 45

я думаю можно воспользоватся массивом, тогда нужно знать номер кнопки на который нажимается, вопрос как?

var u = document.body.childNodes.length //количество всех элементов, а мне нужно только номер нажатого
                if (f===1) {
                    arr[u] = "&LED"+String(u)+"=1";
                } else {
                    arr[u] = "&LED"+String(u)+"=0";
Ответить с цитированием
  #8 (permalink)  
Старый 30.11.2016, 00:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Строка 14 в вашем коде лишняя - прописывает текст ON/OFF кнопке и строке код в строке 15.
Лишние строки и 17-21. Если get-параметры, то для запроса, а если запроса, то самое простое решение, это форма со скрытыми полями с именами LED1...LED3, которые принимают значения кнопок.
Либо, если не форма, то получать коллекцию кнопок и формировать параметры запроса из их атрибутов и значений единожды - во время отправки запроса. При этом это может быть обход циклом полученной коллекции кнопок и формирование строки, а можно и map().join('&').

Последний раз редактировалось laimas, 30.11.2016 в 03:14.
Ответить с цитированием
  #9 (permalink)  
Старый 30.11.2016, 12:10
Аспирант
Отправить личное сообщение для allexmak Посмотреть профиль Найти все сообщения от allexmak
 
Регистрация: 13.12.2015
Сообщений: 45

запросы идут от контроллера по этому страничка отправляет каждую секунду данные strLED1,strLED2.. либо можно массив arr[] как в примере emulatorGet().
возможно правильнее было бы все перевести в map().join('&') но мне пока сложно ковырять весь код, PS(могу конечно выложить и его)
в любом случае мне интересно как можно узнать номер кнопки на которую нажимаем.

Последний раз редактировалось allexmak, 30.11.2016 в 12:50.
Ответить с цитированием
  #10 (permalink)  
Старый 30.11.2016, 13:09
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от allexmak
запросы идут от контроллера
Ну так добавьте в контроллер формирование параметров запроса:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#led').addEventListener('click', function(e){
        var bt = e.target, f;
        while (bt.tagName != 'DIV') {
            if(bt.tagName == 'BUTTON') {
                f = bt.value ^ 1;
                bt.value = f;
                bt.innerHTML = bt.parentNode.querySelector('span').innerHTML = ['OFF', 'ON'][f];
                return;
            }
            bt = bt.parentNode;
        }
    });
    
    
    setInterval(function() {
        document.querySelector('#test').innerHTML = [].map.call(document.querySelectorAll('#led button'), function(e) {
            return e.name+'='+e.value;
        }).join('&');
    }, 1000);
});
</script>    
</head>
 
<body>
<div id="led">
<p>30: <button name="LED1" value="0"> OFF </button> <span class="value">...</span></p>
    <p>31: <button name="LED2" value="0"> OFF </button> <span class="value">...</span></p>
    <p>32: <button name="LED3" value="0"> OFF </button> <span class="value">...</span></p>
</div>
 
<div id="test"></div> 
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация залипания кнопки SmilingDog Events/DOM/Window 14 22.12.2014 06:35
Как подчинить себе цикл wreder jQuery 17 20.11.2013 21:17
Цикл завешивает страницу, помогите Romingood jQuery 5 19.10.2013 14:30
Непонятный алгоритм отработки функций Jopses jQuery 5 16.02.2013 11:55
Обновление события кнопки TheHappy Общие вопросы Javascript 0 06.03.2012 09:30