Форум

MSos0506 · #1 (**permalink**) 06.03.2013, 15:24

Многоуважаемые Гуру!
Взываю о помощи, весь моск сломал со своими поверхностными знаниями Явы, подскажите, плз, где собака порылась...

Цель: сделать область разделенную на 4 под-области, с возможностью выбора цвета бэкграунда для каждой из под-областей...
Бьюсь весь день, цвет фона не меняется...

Сокращенный (для одной области) исходник:

HTML:

Код:

<div class='ColorArea'>
	<div ID='Area1' class='ColorArea1'>
		<select ID='Color1' class='ColorList1' onChange='SelectColor()'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div class='ColorArea2'>
		...
	</div>
	<div class='ColorArea3'>
		...
	</div>
	<div class='ColorArea4'>
		...
	</div>
</div>

CSS:

Код:

.ColorArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
.ColorArea1 {position:absolute;top:0px;left:0px;width:250px;height:250px;padding:0;margin:0;}
.ColorList1 {position:absolute;top:220px;left:40px;}

Java:

Код:

function SelectColor() {
	Area1.backgroundColor = Color1.value;
}

Казалось бы, что может быть проще, ан нет...

Хелп, плиииииззззз...

Заранее, мэни сенкс...

ksa · #2 (**permalink**) 06.03.2013, 15:30

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

поверхностными знаниями Явы

Тут не форум по Яве...

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

Хелп, плиииииззззз...

Делай полный тестовый пример...

MSos0506 · #3 (**permalink**) 06.03.2013, 15:47

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

Тут не форум по Яве...

Делай полный тестовый пример...

Извините что потревожил, но хде-же спросить о проблеме с яваскриптом, как не на яваскрипт дот ру..

По поводу "полный" - сократил код для читабельности...
Остальные три области все с полностью таким-же "селектом", отличающиеся лишь номером области и ее расположением...
Весь остальной код - "интерьерная" часть...

Понимаю что дело в каком-то пустяке, не понимаю в каком...
Хелп иф поссибл...

MSos0506 · #4 (**permalink**) 06.03.2013, 16:14

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

Делай полный тестовый пример...

К примеру вот такой полный тестовый пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<style type='text/css'>
		.PantoneArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
		.PantoneArea1 {position:absolute;top:0px;left:0px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneArea2 {position:absolute;top:0px;left:250px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneArea3 {position:absolute;top:250px;left:250px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneArea4 {position:absolute;top:250px;left:0px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneList1 {position:absolute;top:220px;left:40px;}
		.PantoneList2 {position:absolute;top:220px;left:40px;}
		.PantoneList3 {position:absolute;top:10px;left:40px;}
		.PantoneList4 {position:absolute;top:10px;left:40px;}
	</style>
</head>

<body>
	<script language="JavaScript" type='text/javascript'>
		function SelectPantone() {
			Area1.backgroundColor = Pantone1.value;
			Area2.backgroundColor = Pantone2.value;
			Area3.backgroundColor = Pantone3.value;
			Area4.backgroundColor = Pantone4.value;
		}
	</script>

	<div ID='ColorArea' class='PantoneArea'>
		<div ID='Area1' class='PantoneArea1'>
			<select ID='Pantone1' class='PantoneList1' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
		<div ID='Area2' class='PantoneArea2'>
			<select ID='Pantone2' class='PantoneList2' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
		<div ID='Area3' class='PantoneArea3'>
			<select ID='Pantone3' class='PantoneList3' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
		<div ID='Area4' class='PantoneArea4'>
			<select ID='Pantone4' class='PantoneList4' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
	</div>
</body>
</html>

danik.js · #5 (**permalink**) 06.03.2013, 16:25

ksa, а ты следующий раз посылай на javatalks.ru
Чтобы человек сам осознал свой промах.

Area1.style.backgroundColor

MSos0506 · #6 (**permalink**) 06.03.2013, 16:35

Сообщение от danik.js

ksa, а ты следующий раз посылай на javatalks.ru
Чтобы человек сам осознал свой промах.

Area1.style.backgroundColor

danik.js, спасибо!!!
И за "направление движения" тоже (искренне), теперь буду знать куда ходить с глупыми вопросами...

Благодарю премного, изините за то чито отвлек...

Deff · #7 (**permalink**) 06.03.2013, 19:00

MSos0506,
Удобнее сделать div wraper, c position:relative; в него засунуть таблицу
position:absolute;width:100%;height:100%; с нужным числом ячеек и строк
следом суем наш <div ID='ColorArea' class='PantoneArea'>
Далее каждой ячейке присваиваем id= Row+'-'+SPAN
Далее в функции селектов <div ID='ColorArea' прописываем аргументом id управляемой ячейки

ksa · #8 (**permalink**) 06.03.2013, 21:08

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

К примеру вот такой полный тестовый пример:

Уже лучше!

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.PantoneArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
.PantoneArea1 {position:absolute;top:0px;left:0px;width:250px;height:250px;padding:0;margin:0;}
.PantoneArea2 {position:absolute;top:0px;left:250px;width:250px;height:250px;padding:0;margin:0;}
.PantoneArea3 {position:absolute;top:250px;left:250px;width:250px;height:250px;padding:0;margin:0;}
.PantoneArea4 {position:absolute;top:250px;left:0px;width:250px;height:250px;padding:0;margin:0;}
.PantoneList1 {position:absolute;top:220px;left:40px;}
.PantoneList2 {position:absolute;top:220px;left:40px;}
.PantoneList3 {position:absolute;top:10px;left:40px;}
.PantoneList4 {position:absolute;top:10px;left:40px;}
</style>
<script type="text/javascript">
function clr(Obj){
	Obj.parentNode.style.backgroundColor=Obj.value;
};
</script>
</head>
<body>
<div ID='ColorArea' class='PantoneArea'>
	<div ID='Area1' class='PantoneArea1'>
		<select ID='Pantone1' class='PantoneList1' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area2' class='PantoneArea2'>
		<select ID='Pantone2' class='PantoneList2' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area3' class='PantoneArea3'>
		<select ID='Pantone3' class='PantoneList3' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area4' class='PantoneArea4'>
		<select ID='Pantone4' class='PantoneList4' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
</div>
</body>
</html>

Deff · #9 (**permalink**) 06.03.2013, 21:43

Поправил стиль, понравились шахматы

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.PantoneArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
.Pantone{position:absolute;width:250px;height:250px;padding:0;margin:0;border:red solid 1px;}
.Pantone.Area2 {top:0px;left:250px;}
.Pantone.Area3 {top:250px;left:250px;}
.Pantone.Area4 {top:250px;left:0px;}
.Plist{position:absolute;}
.Plist.List1 {top:220px;left:40px;}
.Plist.List2 {top:220px;left:40px;}
.Plist.List3 {top:10px;left:40px;}
.Plist.List4 {top:10px;left:40px;}
</style>
<script type="text/javascript">
function clr(Obj){
	Obj.parentNode.style.backgroundColor=Obj.value;
};
window.onload = function (){
   var elements = document.querySelectorAll('#ColorArea >div > .Plist ');
   for(var i=0;i<elements.length;i++){
      clr(elements[i])
   }
}
</script>
</head>
<body>
<div ID='ColorArea' class='PantoneArea'>
	<div ID='Area1' class='Pantone Area1'>
		<select ID='Pantone 1' class='Plist List1' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c' selected>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area2' class='Pantone Area2'>
		<select ID='Pantone 2' class='Plist List2' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9' selected>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area3' class='Pantone Area3'>
		<select ID='Pantone 3' class='Plist List3' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c' selected>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area4' class='Pantone Area4'>
		<select ID='Pantone 4' class='Plist List4' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9' selected>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
</div>
</body>
</html>

danik.js · #10 (**permalink**) 07.03.2013, 03:48

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

   for(var i in elements){
      clr(elements[i])
   }

Интересно, как твой скрипт будет менять цвет "объектов" elements.length и elements.item ?

Форум

Справочник

Discord чат

Курсы javascript