Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2021, 15:58
Новичок на форуме
Отправить личное сообщение для Levvarrr Посмотреть профиль Найти все сообщения от Levvarrr
 
Регистрация: 14.12.2021
Сообщений: 5

Повторяющийся код в Html файле
Всем привет!
Я что то совсем увлекся web версткой и Html файл страницы пухнет как на дрожжах

Вот в чем вопрос:
У меня на страницы штук 10 выпадающих списков на элементе (select)
<select id="940">
<option value=0>Нет</option>
<option value=10>Датчик1 - 0 с&#176</option>
<option value=15>Датчик1 - 5 с&#176</option>
<option value=110>Датчик1 - 10 с&#176</option>
<option value=115>Датчик1 - 15 с&#176</option>
<option value=120>Датчик1 - 20 с&#176</option>
<option value=125>Датчик1 - 25 с&#176</option>
<option value=130>Датчик1 - 30 с&#176</option>
<option value=135>Датчик1 - 35 с&#176</option>
<option value=140>Датчик1 - 40 с&#176</option>
<option value=20>Датчик2 - 0 с&#176</option>
<option value=25>Датчик2 - 5 с&#176</option>
<option value=210>Датчик2 - 10 с&#176</option>
<option value=215>Датчик2 - 15 с&#176</option>
<option value=220>Датчик2 - 20 с&#176</option>
<option value=225>Датчик2 - 25 с&#176</option>
<option value=230>Датчик2 - 30 с&#176</option>
<option value=235>Датчик2 - 35 с&#176</option>
<option value=240>Датчик2 - 40 с&#176</option>
</select>

Меняется только ID элемента.
Скажите пожалуйста можно как то упростить написание?

Например все (option) вынести в отдельный файл (или в файл JS). А потом как то вставить.

Мои поиски и попытки:
1) Хотел вставить внутри (select) div и id, но они не ищутся в JS
2) Нашел информацию про html-импорт Но мне не понятно как указать точку в документе куда вставлять.....
Ответить с цитированием
  #2 (permalink)  
Старый 21.12.2021, 16:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,227

Levvarrr, если так расперло с оптимизацией написания html - можно начать пользоваться шаблонизаторами...
Например pug
https://zaurmag.ru/html5-css3/html-p...108 610901099
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2021, 17:03
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Сообщение от Levvarrr
Хотел вставить внутри (select) div и id,
Чего куда вставить?

В html пишите
<template id="tmpsel">
<select id="940">
<option value=0>Нет</option>
<option value=10>Датчик1 - 0 с&#176</option>
<option value=15>Датчик1 - 5 с&#176</option>
<option value=110>Датчик1 - 10 с&#176</option>
<option value=115>Датчик1 - 15 с&#176</option>
<option value=120>Датчик1 - 20 с&#176</option>
<option value=125>Датчик1 - 25 с&#176</option>
<option value=130>Датчик1 - 30 с&#176</option>
<option value=135>Датчик1 - 35 с&#176</option>
<option value=140>Датчик1 - 40 с&#176</option>
<option value=20>Датчик2 - 0 с&#176</option>
<option value=25>Датчик2 - 5 с&#176</option>
<option value=210>Датчик2 - 10 с&#176</option>
<option value=215>Датчик2 - 15 с&#176</option>
<option value=220>Датчик2 - 20 с&#176</option>
<option value=225>Датчик2 - 25 с&#176</option>
<option value=230>Датчик2 - 30 с&#176</option>
<option value=235>Датчик2 - 35 с&#176</option>
<option value=240>Датчик2 - 40 с&#176</option>
</select>
</template>


Затем в Js

const sel1 = document.getElementById('tmpsel').content.querySelector('select').cloneNode(true);
sel1.id = 'нужный id';

const sel2 = sel1.cloneNode(true)
sel2.id = 'нужный id';
// .....


И вставляем эти select куда надо.

Последний раз редактировалось voraa, 21.12.2021 в 17:13.
Ответить с цитированием
  #4 (permalink)  
Старый 21.12.2021, 19:16
Новичок на форуме
Отправить личное сообщение для Levvarrr Посмотреть профиль Найти все сообщения от Levvarrr
 
Регистрация: 14.12.2021
Сообщений: 5

Почти заработало..... Осталось понять как вставить.
В место где нужна таблица разметил строчку <div id="Table"></div>
HTML:
<template id="tmpsel">
<select id="940">
<option value=0>Нет</option>
<option value=10>Датчик1 - 0 с&#176</option>
<option value=15>Датчик1 - 5 с&#176</option>
</select>
</template>                 
<div id="Table"></div>

Но вместо таблицы появляется надпись [object HTMLSelectElement]
В файле JS написал так:
let sel1 = document.getElementById('tmpsel').content.querySelector('select').cloneNode(true);
sel1.id = "1234";
document.getElementById("Table").innerHTML=sel1;

Последний раз редактировалось Levvarrr, 21.12.2021 в 19:55.
Ответить с цитированием
  #5 (permalink)  
Старый 21.12.2021, 19:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Levvarrr,
места это class, а не id!!!
и делайте макет, если что-то пошло не так?
например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 21.12.2021, 20:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от Levvarrr
.innerHTML=sel1;
.append(sel1)
Ответить с цитированием
  #7 (permalink)  
Старый 21.12.2021, 20:45
Новичок на форуме
Отправить личное сообщение для Levvarrr Посмотреть профиль Найти все сообщения от Levvarrr
 
Регистрация: 14.12.2021
Сообщений: 5

Большое спасибо!
Получилось!

Последний раз редактировалось Levvarrr, 21.12.2021 в 20:51.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Написать JS код, который будет автоматически подставлять значения в HTML kuprik Events/DOM/Window 5 13.12.2017 23:50
Вставить код из отдельного html по value hipaul Events/DOM/Window 3 30.03.2017 08:59
вывести html код страницы в div djonA Общие вопросы Javascript 3 13.05.2013 20:01
Получить html код удаленной страницы AntonP Общие вопросы Javascript 19 02.05.2012 16:15
как узнать html код документа, подгруженного в iframe alexKniaz Events/DOM/Window 7 03.12.2008 12:37