Спасибо, буду пробовать)
|
|
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, время: 13:03. |