Одной строкой js изменить содержимое разных блоков div

@olga_arb · Регистрация: 18.08.2012

Студворк — интернет-сервис помощи студентам

Есть ли возможность одной строкой js изменить содержимое двух разных блоков div, типа:

JavaScript
1
document.getElementById('id1').innerHTML='Содержимое для id1 <scri' +'pt>document. getElementById("id2").innerHTML="Содержимое для id2";</scri'+ 'pt>';

Т.е. выполнить скрипт, внедренный в строку?

@arcmag · 09.02.2015, 12:05

Эмм а почему вам надо именно так?
Можно просто в див с ID = id1 добавить див с ID = id2 легко и просто если вам ЭТО надо.
Или для вас важен сам факт того что было как у ВАС в 1 строчку или что?

@olga_arb · 09.02.2015, 13:04 **[ТС]**

Одной командой изменить содержимое обоих блоков.

@arcmag · 09.02.2015, 13:25

А зачем вы мне так и не объяснили?
Чем вас не устраивает написать вот так вот просто и понятно

JavaScript
1
2
document.getElementById("id1").innerHTML = "blablabla1"; 
document.getElementById("id2").innerHTML = "blablabla2";

я просто смысл не понимаю вы уж извините

@olga_arb · 09.02.2015, 13:57 **[ТС]**

В цикле, одинаковым образом, меняется содержимое разных блоков типа div[i].innerHTML=str[i]. Но при изменении одного из них надо бы изменить еще и соседний. Чтобы не менять общую схему, хорошо бы одной командой сделать.

@arcmag · 09.02.2015, 14:36

Эммммм ну а чем вас не устраивал вариант

JavaScript
1
2
document.getElementById("id1").innerHTML = "blablabla1"; //первый блок
document.getElementById("id2").innerHTML = "blablabla2"; //второй соседний блок

Ну вот вариант на тот случай если вы не знаете ID соседнего блока

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
<head>
<title>Мммм...</title>
<script type="text/javascript">
function XZ(){
    var text = document.getElementById("tx").value;
    var el = document.getElementById("id1"); el.innerHTML = text;
    var el2 = el.nextSibling.nextSibling; el2.innerHTML = text;
}
</script>
<body>
<input type="text" id="tx">
<input type="button" onClick="XZ()" value="фиг его знает">
<div id="id1"></div>
<div></div>
</body>
</html>

@fly380 · 03.05.2015, 14:27

Есть похожая трабла. Есть страничка на которую вывожу информацию из скрипта

JavaScript
1
2
document.getElementById("id1").innerHTML = "blablabla1"; //первый блок
document.getElementById("id2").innerHTML = "blablabla2"; //второй блок

HTML5
1
2
<div id="id1"></div>
<div id="id2"></div>

Но есть загвоздка, мне нужно из этого же скрипта вывести информацию на разные страницы. А если id больше чем 1

HTML5
1
<div id="id2"></div>

див остается пустым. Как это можно исправить?

@fly380 · 04.05.2015, 17:11

Вижу что недостаточно раскрыл суть вопроса. И так есть скрипт:

JavaScript
1
2
3
document.getElementById("id1").innerHTML = "blablabla1"; //первый блок
...
document.getElementById("id40").innerHTML = "blablabla40"; //сороковой блок

то есть всего 40 блоков. И есть HTML документ в котором все эти блоки выводятся.

HTML5
1
2
3
<div id="id1"></div>
...
<div id="id40"></div>

Но если в данном HTML документе пропустить один блок то дальнейшие блоки выводятся пустыми.

HTML5
1
2
3
<div id="id1"></div>
пропущен блок 2
<div id="id3"></div> - тогда этот блок и все следующие выводится пустыми (без текста из скрипта)

Или если в другом HTML документе нужно вывести только один блок к примеру

HTML5
1
<div id="id20"></div>

то он также выводится пустым.
И тут вопрос можно ли это как то поправить? В js я полный ноль, но очень нужно.

@Jetlag · 04.05.2015, 18:34

Поправить можно.
Почему это происходит? Потому что функция document.getElementById("divsmth") не находя элемент с именем "divsmth" закономерно возвращает null, у null нет свойства innerHtml и возникает ошибка, дальше скрипт не выполняется.
Как поправить - например проверить не вернул ли document.getElementById null и если вернул, то ничего не менять

Для тех кто в js полный ноль существуют учебники, например learn.javascript.ru

@fly380 · 04.05.2015, 19:32

Проверка выдает следующее

HTML5
1
2
Uncaught TypeError: Cannot set property 'innerHTML' of null
(anonymous function) @ test.js:3

А дальше я к сожалению ничего не понял.

@Jetlag · 04.05.2015, 19:36

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

@fly380 · 04.05.2015, 20:55

Ну вообще я перед тем как задать вопрос, прочитал не мало мануала по

JavaScript
1
document.getElementById

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

нужно реализовать это, поэтому и спросил. Чтобы если кому не тяжело объяснили и показали как исправить.

@Jetlag · 04.05.2015, 21:18

Почитайте еще мануал по if-else, чтобы это решить хоть как-то.

Вразумительное обяснение:
Если обратиться к несуществующему элементу, то document.getElementById вернет null, ничего, пустоту.
У null нету функции innerHtml которую Вы пытаетесь вызвать, вот и ошибка.

Вам нужно используя магическую силу условия if-else проверить, а не null ли вам вернули, а если null то не осуществлять опрометчивых действий.

Время не ждет, это да. Вот только зачем браться за работу которую совсем не умеешь делать?

@fly380 · 04.05.2015, 21:23

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

Вот только зачем браться за работу которую совсем не умеешь делать?

Кто ничего не делает, ничему и не научится. Я это делаю для своей нужды...

@Jetlag · 04.05.2015, 21:43

Ну так учитесь. Сейчас Вы учитесь уговариванию, а не программировать. Тут много программирования - умный восьмиклассник с полного нуля за два часа разберется.

Я это делаю для своей нужды...

Ща заплачу

@fly380 · 05.05.2015, 01:30

Jetlag, если нет желания помочь пройдите мимо, а хамить не нужно.

Добавлено через 3 часа 43 минуты
Пошол другим путем, заменил

JavaScript
1
2
document.getElementById("id1").innerHTML = "blablabla1"; //первый блок
document.getElementById("id2").innerHTML = "blablabla2"; //второй соседний блок

на

JavaScript
1
2
$('#id1').text('blablabla1'); //первый блок 
$('#id2').text('blablabla2'); //второй соседний блок

может не совершенство, но зато работает

@Lazy_Den · 05.05.2015, 01:33

Не по теме:

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

Пошол другим путем

:facepalm: Слежу за этой темой молча, но сейчас просто не смог пройти мимо.

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	09.02.2015, 12:05
	Эмм а почему вам надо именно так? Можно просто в див с ID = id1 добавить див с ID = id2 легко и просто если вам ЭТО надо. Или для вас важен сам факт того что было как у ВАС в 1 строчку или что? 0

@olga_arb 0 / 0 / 0 Регистрация: 18.08.2012 Сообщений: 38
	09.02.2015, 13:04 [ТС]
	Одной командой изменить содержимое обоих блоков. 0

@olga_arb 0 / 0 / 0 Регистрация: 18.08.2012 Сообщений: 38
	09.02.2015, 13:57 [ТС]
	В цикле, одинаковым образом, меняется содержимое разных блоков типа div[i].innerHTML=str[i]. Но при изменении одного из них надо бы изменить еще и соседний. Чтобы не менять общую схему, хорошо бы одной командой сделать. 0

@Jetlag 111 / 49 / 20 Регистрация: 21.10.2013 Сообщений: 212
	04.05.2015, 18:34
	Поправить можно. Почему это происходит? Потому что функция document.getElementById("divsmth") не находя элемент с именем "divsmth" закономерно возвращает null, у null нет свойства innerHtml и возникает ошибка, дальше скрипт не выполняется. Как поправить - например проверить не вернул ли document.getElementById null и если вернул, то ничего не менять Для тех кто в js полный ноль существуют учебники, например learn.javascript.ru 0

@Jetlag 111 / 49 / 20 Регистрация: 21.10.2013 Сообщений: 212
	04.05.2015, 19:36
	Печаль, значит либо читайте учебник чтобы написать пару простых строчек либо ждите доброго человека который их вам напишет 0

@Jetlag 111 / 49 / 20 Регистрация: 21.10.2013 Сообщений: 212
	04.05.2015, 21:18
	Почитайте еще мануал по if-else, чтобы это решить хоть как-то. Вразумительное обяснение: Если обратиться к несуществующему элементу, то document.getElementById вернет null, ничего, пустоту. У null нету функции innerHtml которую Вы пытаетесь вызвать, вот и ошибка. Вам нужно используя магическую силу условия if-else проверить, а не null ли вам вернули, а если null то не осуществлять опрометчивых действий. Время не ждет, это да. Вот только зачем браться за работу которую совсем не умеешь делать? 0