цикл функций на кнопки
Помогите составить цикл и функцию на все кнопки 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> |
<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> |
Интересное решение, теперь почему немогу вывести результат в .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> |
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 |
Цитата:
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";} |
Спасибо, по поводу 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> |
я думаю можно воспользоватся массивом, тогда нужно знать номер кнопки на который нажимается, вопрос как?
var u = document.body.childNodes.length //количество всех элементов, а мне нужно только номер нажатого if (f===1) { arr[u] = "&LED"+String(u)+"=1"; } else { arr[u] = "&LED"+String(u)+"=0"; |
Строка 14 в вашем коде лишняя - прописывает текст ON/OFF кнопке и строке код в строке 15.
Лишние строки и 17-21. Если get-параметры, то для запроса, а если запроса, то самое простое решение, это форма со скрытыми полями с именами LED1...LED3, которые принимают значения кнопок. Либо, если не форма, то получать коллекцию кнопок и формировать параметры запроса из их атрибутов и значений единожды - во время отправки запроса. При этом это может быть обход циклом полученной коллекции кнопок и формирование строки, а можно и map().join('&'). |
запросы идут от контроллера по этому страничка отправляет каждую секунду данные strLED1,strLED2.. либо можно массив arr[] как в примере emulatorGet().
возможно правильнее было бы все перевести в map().join('&') но мне пока сложно ковырять весь код, PS(могу конечно выложить и его) в любом случае мне интересно как можно узнать номер кнопки на которую нажимаем. |
Цитата:
<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> |
Спасибо, буду пробовать)
|
|
laimas,
Проверил с запросами все норм, работает, спасибо еще раз. Теперь возник вопрос мне нужно при нажатии поменять 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; document.getElementsByName("LED2").value = 1;//не меняет value, нажимаю на 1ю по сути должен поменять и 2й 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> |
Цитата:
Код вам показывает как это "человечнее" делать. Во-первых, к примеру у вас дома выключатель света по умолчанию в положении выключен. Чтобы включить свет вы "спрашиваете" выключатель включен ли им свет или нет? Нет, вы просто щелкаете им - свет включился, еще раз щелкнули, выключился, опять щелчок, опять свет и т.д. Все на автомате, схоже с работой триггера, которому вы изменяете состояние, а он управляет нагрузкой. Так кто же вам мешает по такому же принципу и управлять состоянием кнопок в коде, без всяких IF, которые ну просто не приделах в данном случае. Во-вторых по коду предложенному, детально, по русски, а он соответствует заявленному в вопросе: document.addEventListener('DOMContentLoaded', function() ... - обработчик обрабатывающий событие загрузки документа, когда DOM сформирован и будет доступные и #led, и прочее нас интересующее. document.querySelector('#led').addEventListener('c lick', function(e) - это самое интересное, это делегирование обработки щелчков по кнопкам их общему родительскому элементу. Если в него прописать подобным образом теги параграфов, кнопок, то скрипт обработчик щелчков по ним не надо писать, их события также будут обработаны данным обработчиком. Цикл while в данном обработчике определяет целевой элемент, то есть тот по которому щелкнули, делая обход от целевого элемента вверх до родителя - DIV, и если это кнопка if(bt.tagName == 'BUTTON'), то берем ее состояние, которое хранит ее свойство value, и инвертируем его посредством операции XOR (исключающее ИЛИ). Измененное состояние записываем в свойство кнопки, на основании его как индекса массива получаем текст и пишем его куда требуется. Все, это вся работа и так как вы и хотели. Вопрос - зачем писать код изменяющий состояние текущей кнопки (по которой щелкнули), в котором нужно изменять состояние кнопки (кнопок), по которым вообще не производился щелчок? Где логика? Если скрипт должен изменять не состояние текущей кнопки, а, к примеру, состояние нескольких кнопок, и они зависят от номера нажатой кнопки, то где описание данной задачи? И в третьих - setInterval(function()... и запись в '#test', это лишь для того, чтобы просмотреть работу кода здесь, зачем вы это все постоянно копируете? К тому же, выгодно ли все-таки тревожить сервер постоянно этими кнопками? Допустим, сервер должен реагировать на изменение состояний кнопок. Но в таком случае выгоднее делать запрос сервера не каждую секунду, а только тогда когда состояние какой либо кнопки изменилось. Гонять сервер запросами просто так это ведь лишено всякого смысла, вряд ли кнопки кто-то будет щелкать с частой менее 1 секунды. |
хорошо, работа всего кода такая, открываем страничку принимаем гет запросом состояния всех кнопок потом нажимаем на кнопки и отправляем изменение.
Вот часть функции приема , туда я добавляю состояние кнопки(on,off) в span (в Button и правда будет лишнее) и меняем состояние value в кнопке //Leds for (var i=0; i < 16; i++) { if (this.responseXML.getElementsByTagName('LED')[i].childNodes[0].nodeValue === "on") { document.getElementById("ld"+i).innerHTML = "ON"; LED_state[i] = 1; //document.getElementById("LED"+i).value = 1; } else { document.getElementById("ld"+i).innerHTML = "OFF"; LED_state[i] = 0; //document.getElementById("LED"+i).value = 0; } } В итоге при клике формируем только переменную strButton которая потом отправляется(map().join('&') оказывается не нужен, все работает проверял) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script> var strButton;//отправка состояния 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; strButton = '&'+bt.name+'='+bt.value; document.querySelector('#test').innerHTML = strButton;//временно return; } bt = bt.parentNode; } }); }); </script> </head> <body> <div id="led"> <p>30: <button name="LED1" value="0"> button </button> <span class="value">...</span></p> <p>31: <button name="LED2" value="0"> button </button> <span class="value">...</span></p> <p>32: <button name="LED3" value="0"> button </button> <span class="value">...</span></p> </div> <div id="test"></div> </body> </html> |
Делайте как знаете, ибо я пишу что IF тут как собаке пятая лапа, а вижу опять
for (var i=0; i < 16; i++) { if (this.responseXML.getElementsByTagName('LED')[i].childNodes[0].nodeValue === "on") { document.getElementById("ld"+i).innerHTML = "ON"; LED_state[i] = 1; .... map().join('&') это всего лишь один из способов сформировать строку параметров запроса, в недрах своих это тот же цикл. Вот только не понять нахрена нужен посредник в виде strButton и прочего. |
Часовой пояс GMT +3, время: 01:59. |