Форум

allexmak · #11 (**permalink**) 30.11.2016, 16:45

Спасибо, буду пробовать)

laimas · #12 (**permalink**) 30.11.2016, 19:23

Только нужно учитывать:
https://learn.javascript.ru/onload-ondomcontentloaded
https://developer.mozilla.org/ru/doc...ects/Array/map

allexmak · #13 (**permalink**) 01.12.2016, 11:40

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>

laimas · #14 (**permalink**) 01.12.2016, 14:08

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

мне нужно при нажатии поменять value совсем другой кнопки

Зачем? Вы либо поясните логику чего надо, либо показывайте код соответствующий. У вас по коду в вопросе что - куча условий, которые определяют состояние нажатой кнопки и изменяется ее состояние, так?

Код вам показывает как это "человечнее" делать. Во-первых, к примеру у вас дома выключатель света по умолчанию в положении выключен. Чтобы включить свет вы "спрашиваете" выключатель включен ли им свет или нет? Нет, вы просто щелкаете им - свет включился, еще раз щелкнули, выключился, опять щелчок, опять свет и т.д. Все на автомате, схоже с работой триггера, которому вы изменяете состояние, а он управляет нагрузкой.

Так кто же вам мешает по такому же принципу и управлять состоянием кнопок в коде, без всяких 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 секунды.

allexmak · #15 (**permalink**) 01.12.2016, 16:04

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

Вот часть функции приема , туда я добавляю состояние кнопки(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>

laimas · #16 (**permalink**) 01.12.2016, 16:52

Делайте как знаете, ибо я пишу что 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 и прочего.

Форум

Справочник

Discord чат

Курсы javascript