Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не отображается backgroundImage (https://javascript.ru/forum/events/70416-ne-otobrazhaetsya-backgroundimage.html)

QzzQ 04.09.2017 04:33

Не отображается backgroundImage
 
Добрый день,

Рандомно выбирается LOGO рисунок на странице, хотелось что бы с ним и изменялся ФОН согласно номера logo. Но если основной рисунок отображается, то background нет.

var a=Math.round(Math.random()*3)
	image = new Array();
	image[0]="example/logo1.png"
	image[1]="example/logo2.png"
	image[2]="example/logo3.png"
	image[3]="example/logo4.png"
	document.write ("<img src="+image[a]+">");
	if (a=="0")
{
	alert("СОВПАЛО_1")
	document.getElementById('page_background').style.backgroundImage = "url('/top1.png')";
};
	if (a=="1")
{
	alert("СОВПАЛО_2")
	document.getElementById('page_background').style.backgroundImage = "url('/top2.png')";
};
	if (a=="2")
{
	alert("СОВПАЛО_3")
	document.getElementById('page_background').style.backgroundImage = "url('/top3.png')";
};
	if (a=="3")
{
	alert("СОВПАЛО_4")
	document.getElementById('page_background').style.backgroundImage = "url('/top4.png')";
};


Убедительная просьба подсказать, что я делаю не так.

QzzQ 04.09.2017 04:55

Разобрался, должно быть так:

var a=Math.round(Math.random()*3)
	image = new Array();
	image[0]="example/logo1.png"
	image[1]="example/logo2.png"
	image[2]="example/logo3.png"
	image[3]="example/logo4.png"
	document.write ("<img src="+image[a]+">");
	if (a=="0")
{
	document.body.style.backgroundColor = '#FF9999';
	document.body.style.backgroundImage = "url('top1.png')";
	
};
	if (a=="1")
{
	document.body.style.backgroundColor = '#3399FF';
	document.body.style.backgroundImage = "url('top2.png')";
	
};
	if (a=="2")
{
	document.body.style.backgroundColor = '#CC6633';
	document.body.style.backgroundImage = "url('top3.png')";
};
	if (a=="3")
{
	document.body.style.backgroundColor = '#0FA494';
	document.body.style.backgroundImage = "url('top4.png')";
};

vitek-82 04.09.2017 11:04

Я бы так сделал, вроде то же самое

var a=Math.round(Math.random() * 3);

var backColor = ['#FF9999', '#3399FF', '#CC6633', '#0FA494'];

document.getElementById('page_background').style.background = backColor[a] + ' url(top'+(a+1)+'.png)';

j0hnik 04.09.2017 11:46

vitek-82,
var a=Math.floor(Math.random() * 3)

Лучше так
иначе первая и последняя будет реже в два раза.

vitek-82 04.09.2017 22:24

я как раз сегодня думал над использованием Math.round , то что вы и имеете ввиду, согласен, вы прям словили мою утреннюю недоработанную мысль!
<0.5 = 0;
>=0,5 и <1,5 = 1;
>=1,5 и <2,5 = 2;
>=2.5 = 3

Спасибо что подбили на додумать!

j0hnik 04.09.2017 22:34

и еще один небольшой нюанс

var backColor = ['#FF9999', '#3399FF', '#CC6633', '#0FA494'],
a=Math.floor(Math.random() * backColor.length);


чтобы можно было добавлять цвета в массив и не заботится о том что, что то поломается


Часовой пояс GMT +3, время: 17:21.