Изменить текст в поле <legend>
Всем здравствуйте , стоит задача при вводе текста в текстовом поле меня "Текст" в нутри <title></title> и <legend></legend> с первым разобрался а вот со вторым никак , реализация обработки нажатия для текстового поля есть
function readdata(el){
document.title=el.value;
document.legend=el.value;
}
в титл меняется в легенд нет , подскажите пожалуйста как это сделать. |
Так?
function readdata(el) {
document.title = el.value;
document.querySelector('legend')?.textContent = el.value;
}
|
Преогромнейшее спасибо , только у Вас затисался ? лишний
document.querySelector('legend')?.textContent = el.value;
должно быть
document.querySelector('legend').textContent = el.value;
|
Цитата:
|
ну с "?" не сработало почемуто
|
Цитата:
|
Цитата:
Цитата:
Цитата:
|
Ребят раз пошла такая пьянка :) подскажите еще один момент. Вообще я вожусь с устройством на ESP8266 и создаю сервер , в HTTP и JS вообще не волоку , так просмотрел краткий курс 15 уроков и примеры людей листаю.
Со все вроде уже разобрался остался один момент с приемом данных с ESP8266 на веб сервер.Я отправлюя с веб сервера запрос на сканирование доступных сетей на ESP8266 обрабатываю его и обратно с ответом отправляю его на сервер в JSON формате
{"Nomber":"3","Name0":"ptihka","дБм0":"-69дБм","Name1":"ptihka","дБм1":"-50дБм","Name2":"DOM_YHOME","дБм2":"-71дБм"}
такого типа , немогу найти как его принять и заполнить в выпадающий список , может кто подскажет. |
Цитата:
Цитата:
|
Web сервер подгружаю с ESP8266 на странице есть выпадающий список , в него нужно заполнить название сетей которые приходят от ESP8266 по нажатию кнопки Scan (при нажатии кнопки скан идет запрос на ESP8266 там обрабатывается , происходит сканирование доступных сетей и отправляется ответ на страницу в виде JSON строки "HTTP.send(200, "text/json", Json)" ). Эти данные на странице в отладке видны , не знаю как их обработать и запихнуть в выпадающий список. Немогу загрузить сюда файлы HTML и JS выдает ошибку
|
Цитата:
Ключи Name* и дБм* это какая-то фигня. Такое можно оформить массивом такого вида
{
list: [
{name: '', dbm: ''},
{name: '', dbm: ''},
{name: '', dbm: ''},
]
}
|
Да именно поместить в select , в ключах "Name0-NameN" хранятся названия сетей которые нашел контроллер в ключах "дБм0" хранится их мощность сигнала, "Nomber":"3" количество найденных сетей.
Цитата:
|
Цитата:
|
Про массивы я понимаю но как мне массив передать на страничку с ESP8266 не понимаю , или обработать JSON строку в массив ? Но я как раз и не могу обработать ее в JS.
|
Цитата:
<select id='tmp1'></select>
<select id='tmp2'></select>
<script>
// Твой вариант данных
const str1 = '{"Nomber":"3","Name0":"ptihka","дБм0":"-69дБм","Name1":"ptihka","дБм1":"-50дБм","Name2":"DOM_YHOME","дБм2":"-71дБм"}'
const obj = JSON.parse(str1)
for (let i = 0; i < +obj.Nomber; i++) {
const o = document.createElement('option')
o.value = obj['дБм' + i]
o.textContent = obj['Name' + i]
tmp1.insertAdjacentElement('beforeend', o)
}
// Мой вариант данных
const str2 = '[{"Name":"ptihka","дБм":"-69дБм"},{"Name":"ptihka","дБм":"-50дБм"},{"Name":"DOM_YHOME","дБм":"-71дБм"}]'
const arr = JSON.parse(str2)
arr.forEach(obj => {
const o = document.createElement('option')
o.value = obj['дБм']
o.textContent = obj.Name
tmp2.insertAdjacentElement('beforeend', o)
})
</script>
Цитата:
|
ksa огромное спасибо , но это чуть не то что я спрашиваю , нет это мне тоже надо , но основная проблемма в том как получить данные в "str2" с ответа ESP8266 Вы просто создали констовую переменную и парсите ее , а мне ее нужно взять(вытащить) из "POST" ответа из контроллера ESP8266 эти данные
|
Цитата:
Что ты показал - с тем я и выполнил преобразование. |
Вложений: 2
Мне как раз нужно принять данные. Опишу последовательность действий: посылаю POST запрос на контроллер , контроллер формирует JSON строку и вместе с ответом отправляет ее на страницу такого вида
(200, "text/json", Json), это и передается та строка которую я указал выше , вот ее я не знаю как обработать на страничке , как ее вытащить из ответа который отправил контроллер. |
Блин а почему так портится качество картинок
https://ibb.co/vhvNjPp https://ibb.co/hdV4v6d так лучше будет |
ptihka, покажите код, который используете для отправки запроса на контроллер.
Обрабатывать ответ на запрос нужно там же, где вы его отправляете, а не пытаться его каким-нибудь хитрым образом перехватить и обработать. По хорошему, как и написали выше, вам стоит изменить формат ответа вашего контроллера, текущий формат - форменный ужас. UPD. по идее что-то типа такого должно получится с текущим форматом ответа контроллера (на базе кода ksa):
<select id="tmp1"></select>
<script>
fetch('/Scan_network', {method: 'post'})
.then(res => res.json())
.then(obj => {
for (let i = 0; i < +obj.Nomber; i++) {
const o = document.createElement('option');
o.value = obj['дБм' + i];
o.textContent = obj['Name' + i];
tmp1.insertAdjacentElement('beforeend', o);
}
});
</script>
|
Не понимаю чем ответ в виде JSON строки такой ужасный? На что нужно изменить формат ответа?
function scan1(){
scan = new XMLHttpRequest();
scan.open("POST", '/Scan_network', true);
scan.send();
}
Тут то ничего замысловатого нет , я ничего не пытаюсь перехватывать , я отправляю запрос на контроллер там обработался запрос и вместе с ответом отправил переменнуб обратно на страницу , так вот эту переменную мне и нужно взять и уже распарсить в выпадающий список по такому принципу как предложил KSA |
ptihka,
https://learn.javascript.ru/xmlhttprequest читать про метод onload и в него ставить код KSA, уточнив под свои данные. также читать про Fetch может кто-то поможет скомпоновать в вашу function scan1 всё это. |
Ребят всем огромное спасибо , Nexus Ваш код сразу заработал , как раз то что нужно было ,надо только разобраться как удалить все поля 'option' при повторном нажатии кнопки Скан а то поля добавляются до бесконечности :victory: , рони Вам спасибо за интересные ссылки , если бы на них попал срезу может бы и сам разобрался , очень позновательно , ну и все кто помогал ОГРОМНОЕ спасибо!!!!
|
Цитата:
У вас данные идеально ложатся в массив объектов без лишних танцев с бубном, однако вы все в один объект затолкали. Данные в таком виде плохо читаемы - это раз; два - из-за такого формата контроллеру отдельно пришлось указывать кол-во найденных сетей в поле «Nomber»; три - зачем хранить данные в неправильном виде, когда можно сделать это правильно?
<script>
function fetchAvailableNetworks() {
return fetch('/Scan_network', {method: 'post'})
.then(res => res.json())
.then(obj => {
tmp1.innerHTML = '';
for (let i = 0; i < +obj.Nomber; i++) {
const o = document.createElement('option');
o.value = obj['дБм' + i];
o.textContent = obj['Name' + i];
tmp1.insertAdjacentElement('beforeend', o);
}
return obj;
});
}
</script>
<select id="tmp1"></select>
<button type="button" onclick="fetchAvailableNetworks()">Fetch networks</button>
|
Nexus, это обычный АСУТПшный подход... :D
Они заводят N-ное количество переменных, с запасом (t0, t1, t2, ..., t15). Типа, больше все равно не будет! (с) Потом с этим и работают. |
Я сразу написал то в JS и HTML ноль , я то и с контроллерами на C+ только начал работать , до этого писал на бесике и недавно прошол курс С+ , Nexus если четно я не понимаю Вас немного , разве я погу отправить массив данных с контроллера и он будет принят на WEB странице? Просто там при отправке ответа есть несколько вариантов формирования строки.
if(filename.endsWith(".html")) return "text/html";
else if (filename.endsWith(".json")) return "application/json";
else if (filename.endsWith(".css")) return "text/css";
else if (filename.endsWith(".js")) return "application/javascript";
else if (filename.endsWith(".png")) return "image/png";
else if (filename.endsWith(".svg")) return "image/svg";
else if (filename.endsWith(".gif")) return "image/gif";
else if (filename.endsWith(".jpg")) return "image/jpeg";
else if (filename.endsWith(".ico")) return "image/x-icon";
else if (filename.endsWith(".xml")) return "text/xml";
else if (filename.endsWith(".pdf")) return "application/x-pdf";
else if (filename.endsWith(".zip")) return "application/x-zip";
else if (filename.endsWith(".gz")) return "application/x-gzip";
это код с контроллера и тут нет варианта отправки массива , либо текс либо JSON может я конечно не прав. Скажиет может есть какой то вариант отправки информации постоянно не только в ответе на запрос? Ну типа просто постоянная двусторонняя связь. |
Цитата:
Цитата:
Цитата:
|
Цитата:
Какая еще top search? :D
<fieldset>
<legend>Тест</legend>
<button>Ок</button>
</fieldset>
<script>
document.querySelector('button').addEventListener('click', _ => {
document.querySelector('legend').textContent = (new Date).toISOString()
})
</script>
|
| Часовой пояс GMT +3, время: 02:48. |