динамическое создание кнопок

@pavard · Регистрация: 29.12.2020

привет, мир!
абсолютно не html/js разработчик. собственно требования в дизайне нет никакого.
есть сервак, для которого сделал html-страничку, получающую через веб-сокеты от сервера json со списком текущих сервисов и их состояние. для каждого сервиса должно быть две кнопки: старт и стоп.
сделал фронтенд страничку, на которой через вебсокет выдаю таблицу сервисов, состояние и счетчики определенные. выглядит это так:

PHP/HTML

   <html>
        <head>
            <meta charset="utf-8" />
            <script language="javascript" type="text/javascript">
                var ws = new WebSocket( 'ws://' + location.host + '/services/state.json' );
                if( ! window.console )
                    { window.console = { log: function() {} } };
                ws.onopen = function( ev )  { console.log( ev ); };
                ws.onerror = function( ev ) { console.log( ev ); };
                ws.onclose = function( ev ) { console.log( ev ); };
                ws.onmessage = function( ev ) {
                    console.log( ev );
                    var data = JSON.parse( ev.data ).data;
                    var table = '';
                    table += '<table border="1">';
                    for( var i in data ) {
                        var service = data[ i ];
                        table += '<tr>';
                        table += '<td>' + service.name + '</td>';
                        table += '<td>' + service.state + '</td>';
                        table += '<td>' + service.failedCounter + '/' + service.failedLimit + '</td>';
                        table += '<td><button href="" type="button">СТАРТ</button></td>';
                        table += '<td><button href="" type="button">СТОП</button></td>';
                        table += '</tr>';
                    }
                    table += '</table>';
                    messages = document.getElementById( 'state' );
                    messages.innerHTML = table;
                };
            </script>
        </head>
        <body>
            <div class="content">
                <h1>сервисы</h1>
                <a href="/services/state.json">скачать слепок</a>
                <div id="state"/>
            </div>
        </body>
    </html>

необходимо добавить реакцию на динамически созданные кнопки СТАРТ/СТОП для каждого сервиса, так чтобы дергался определенный урл гет-запросом ( к примеру '/some/url?service=name&action=STOP' ), так чтобы не покидать страницу.

подскажите как проще всего это добавить в существующий код, прям самый простой способ.
спасибо.

@Ovederax · 29.12.2020, 22:01

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

необходимо добавить реакцию на динамически созданные кнопки

думаю проще будет назначить на кнопки какие-либо id-шники в строках 22-23
затем в строке после 28, написать document.getElementById('start').onclick = onFetchStart

ааа, там же много их,
ну тогда самый тупой метод id-шники сделать в зависимости от i типо 'start-0' 'start-1'

или другой вариант назначить им класс и дата поле с index-ом
вытащить список кнопок document.querySelectorAll('...') по имени класса, пройтись по нему, назначить функцию в зависимости от поля данных

@pavard · 30.12.2020, 18:14 **[ТС]**

можешь кодом, если не сложно, пожалуйста.

@Peskova_Sveta · 30.12.2020, 22:51

я бы строки 14-28 так сделала

Javascript

let table = document.createElement('table');
table.setAttribute('border', '1');
for(let i in data) {
    let row = table.insertRow();
    ['name', 'state'].forEach(el => row.insertCell().textContent = data[i][el]);
    row.insertCell().textContent = data[i]['failedCounter'] + '/' + data[i]['failedLimit'];
    ['START', 'STOP'].forEach(el => {
        let btn = document.createElement('input');
        btn.setAttribute('type', 'button');
        btn.value = el;
        btn.addEventListener('click', () => {
            fetch('/some/url?service=name&action=' + el)
            .then(res => res.json())
            .then(json => console.log(json));
        });
        row.insertCell().append(btn);
    });
}
document.getElementById('state').append(table);

@Ovederax 399 / 256 / 150 Регистрация: 30.04.2017 Сообщений: 504
	29.12.2020, 22:01	2
	Сообщение от pavard необходимо добавить реакцию на динамически созданные кнопки думаю проще будет назначить на кнопки какие-либо id-шники в строках 22-23 затем в строке после 28, написать document.getElementById('start').onclick = onFetchStart ааа, там же много их, ну тогда самый тупой метод id-шники сделать в зависимости от i типо 'start-0' 'start-1' или другой вариант назначить им класс и дата поле с index-ом вытащить список кнопок document.querySelectorAll('...') по имени класса, пройтись по нему, назначить функцию в зависимости от поля данных 0

@pavard 0 / 0 / 0 Регистрация: 29.12.2020 Сообщений: 2
	30.12.2020, 18:14 [ТС]	3
	можешь кодом, если не сложно, пожалуйста. 0

Опции темы