Проблемы с элементом getElementById

@serauto79 · Регистрация: 02.04.2015

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

Привет, есть проблема с getElementById

есть такой код

PHP/HTML

<div id="viv_1"></div>
<div id="viv_2"></div>
 
 
<script type="text/javascript">
document.getElementById("viv_1").innerHTML="выводит только этот - 1";
document.getElementById("viv_2").innerHTML="этот не выводит - 2, почему?";
</script>

так работает прекрасно, но если сделать так то ничего не выводит в браузер

PHP/HTML

<div id="viv_2"></div>
 
 
<script type="text/javascript">
document.getElementById("viv_1").innerHTML="выводит только этот - 1";
document.getElementById("viv_2").innerHTML="этот не выводит - 2, почему?";
</script>

почему такая шляпа, что не так делаю и почему не хочет выводить данные?

@Balanaar · 15.12.2016, 20:28

Потому что интерпретатор натыкается на ошибку в 5й строке и останавливает дальнейшее исполнение программы.

Javascript

1	document.getElementById("viv_1")

во втором случае возвращает undefined. У undefined нет свойства innerHTML

@serauto79 · 15.12.2016, 21:13 **[ТС]**

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

Потому что интерпретатор натыкается на ошибку в 5й строке и останавливает дальнейшее исполнение программы.

можно поконкретнее, что с пятой строкой не так

document.getElementById("viv_1").innerHTML="выводит только этот - 1";

где в ней ошибка?

@vettel · 15.12.2016, 21:21

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

где в ней ошибка?

На странице нет элемента с айдишником viv_1 в вашем втором примере. Из-за этого в этой строке возникает ошибка в стиле "cannot read property innerHTML of null".
Смотрите консоль.

@serauto79 · 15.12.2016, 21:59 **[ТС]**

Я вас понял, спасибо!

может подскажете как мне быть, вот мой код

PHP/HTML

<?php
$array = array("viv_1","viv_2");
$how_much = count($array) - 1;
$random_number = rand(0,$how_much);
echo '<div id="'.$array[$random_number].'">';
?>
 
<script>
document.getElementById("viv_1").innerHTML = "выводит только этот первый - 1";
document.getElementById("viv_2").innerHTML = "выводит только этот второй - 2";
</script>

при загрузке страницы генерится случайно див-ид

PHP

<?php
$array = array("viv_1","viv_2");
$how_much = count($array) - 1;
$random_number = rand(0,$how_much);
echo '<div id="'.$array[$random_number].'">';
?>

и как только сгенерит

HTML5

1	<div id="viv_2"></div>

в браузер ничего не выводит

хотя должно вывести это

выводит только этот второй - 2

Добавлено через 5 минут
если случайно сгенерит

HTML5

1	<div id="viv_1"></div>

то все выводит

а вот со вторым проблема.

Добавлено через 23 минуты
видимо это баг интерпитатора java

не подается логики

если в странице 2 дива, данные выводит

HTML5

1 2	<div id="viv_1"></div> <div id="viv_2"></div>

если в странице, только див 1 данные выводит

HTML5

1	<div id="viv_1"></div>

если в странице, только див 2 - ничего не выводит

HTML5

1	<div id="viv_2"></div>

бред какой-то

@vettel · 15.12.2016, 22:30

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

видимо это баг интерпитатора java

Во-первых, интерпрЕтатора Java не существует, потому что Java - язык с JIT-компиляцией (есть нюансы конечно, джависты больше пояснят, но там не стандартный интерпретатор).
А вот у Javascript интерпретатор в браузере есть (не путать Джаву и Джаваскрипт!).

Во-вторых, в вашем случае просто нужно делать проверку на существование объекта на странице. Допустим,

Javascript

1	if(document.getElementById("viv_1")) document.getElementById("viv_1").innerHTML = "выводит только этот первый - 1";

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

@serauto79 · 15.12.2016, 22:32 **[ТС]**

Ну если никто не знает как сделать, может тогда перефразирую, как

HTML5

<div id="viv"></div>
 
 
 
 
<script>
 
var1 = "Какой-то текст 2";
var2 = "Какой-то текст 2";
var3 = "Какой-то текст 2";
 
</script>

допустим в ява-скрипте есть 3 переменные с данными, и мне нужно чтобы рандомно выводило одну любую из переменных
при загрузке страницы

и выводило в то место на странице где

<div id="viv"></div>

может есть все же способ?

мне нужно именно выводить дивом данные из переменной ява скрипта <div id="viv"></div>

@vettel · 15.12.2016, 22:40

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

может есть все же способ?

На JS - конечно есть.

Javascript

var1 = "Какой-то текст 1";
var2 = "Какой-то текст 2";
var3 = "Какой-то текст 3";
var arr = [var1,var2,var3];
document.getElementById('viv').textContent = arr[Math.floor(Math.random()*arr.length)];

https://jsfiddle.net/6gsy38f1/1/

@serauto79 · 15.12.2016, 22:44 **[ТС]**

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

Javascript
1
if(document.getElementById("viv_1")) document.getElementById("viv_1").innerHTML = "выводит только этот первый - 1";

да в таком варианте, может вывести данные только для двух дивов

Добавлено через 1 минуту
для третего дива уже не работает

HTML5

<div id="viv_3"></div>
 
 
<script>
 
if(document.getElementById("viv_1")) document.getElementById("viv_1").innerHTML = "выводит только этот первый - 1";
document.getElementById("viv_2").innerHTML="выводит только этот первый - 2";
document.getElementById("viv_3").innerHTML="выводит только этот первый - 3";
 
</script>

@vettel · 15.12.2016, 22:48

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

да в таком варианте, может вывести данные только для двух дивов
Добавлено через 1 минуту
для третего дива уже не работает

для КАЖДОГО нужно производить проверку. Я же написал - "для существования объекта", т.е. - каждого.

@serauto79 · 15.12.2016, 22:59 **[ТС]**

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

var1 = "Какой-то текст 1";
var2 = "Какой-то текст 2";
var3 = "Какой-то текст 3";
var arr = [var1,var2,var3];
document.getElementById('viv').textContent = arr[Math.floor(Math.random()*arr.length)];

это конечно классный способ, спасибо, но мне не подойдет по причине что выводит теги html как текст

например если в

var1 = "Какой-то текст 1 <br><img style="width: 100px; height: 100px;" src="111"><br>шщшщзшз<br>";

ну я полагаю вы поняли что не обрабатывает теги html

может можно как-то подпилить чтобы обрабатывало хтмл?

@vettel · 15.12.2016, 23:01

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

может можно как-то подпилить чтобы обрабатывало хтмл?

Запросто. Вместо textContent юзать innerHTML.

Javascript

var1 = "Какой-то текст 1";
var2 = "Какой-то текст 2";
var3 = "Какой-то текст 3";
var arr = [var1,var2,var3];
document.getElementById('viv').innerHTML = arr[Math.floor(Math.random()*arr.length)];

@serauto79 · 15.12.2016, 23:02 **[ТС]**

vettel

однозначно большое вам спасибо за помощь!

@serauto79 20 / 9 / 3 Регистрация: 02.04.2015 Сообщений: 646
	15.12.2016, 21:13 [ТС]	3
	Сообщение от Balanaar Потому что интерпретатор натыкается на ошибку в 5й строке и останавливает дальнейшее исполнение программы. можно поконкретнее, что с пятой строкой не так document.getElementById("viv_1").innerHTML="выводит только этот - 1"; где в ней ошибка? 0

@vettel 84 / 84 / 41 Регистрация: 14.02.2015 Сообщений: 320
	15.12.2016, 21:21	4
	Сообщение от serauto79 где в ней ошибка? На странице нет элемента с айдишником viv_1 в вашем втором примере. Из-за этого в этой строке возникает ошибка в стиле "cannot read property innerHTML of null". Смотрите консоль. 0

@vettel 84 / 84 / 41 Регистрация: 14.02.2015 Сообщений: 320
	15.12.2016, 22:48	10
	Сообщение от serauto79 да в таком варианте, может вывести данные только для двух дивов Добавлено через 1 минуту для третего дива уже не работает для КАЖДОГО нужно производить проверку. Я же написал - "для существования объекта", т.е. - каждого. 0

@serauto79 20 / 9 / 3 Регистрация: 02.04.2015 Сообщений: 646
	15.12.2016, 22:59 [ТС]	11
	Сообщение от vettel var1 = "Какой-то текст 1"; var2 = "Какой-то текст 2"; var3 = "Какой-то текст 3"; var arr = [var1,var2,var3]; document.getElementById('viv').textContent = arr[Math.floor(Math.random()*arr.length)]; это конечно классный способ, спасибо, но мне не подойдет по причине что выводит теги html как текст например если в var1 = "Какой-то текст 1 <br><img style="width: 100px; height: 100px;" src="111"><br>шщшщзшз<br>"; ну я полагаю вы поняли что не обрабатывает теги html может можно как-то подпилить чтобы обрабатывало хтмл? 0

@serauto79 20 / 9 / 3 Регистрация: 02.04.2015 Сообщений: 646
	15.12.2016, 23:02 [ТС]	13
	vettel однозначно большое вам спасибо за помощь! 0