Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   делаю конструктор из DIV. Замена фона. проблемы. (https://javascript.ru/forum/dom-window/30272-delayu-konstruktor-iz-div-zamena-fona-problemy.html)

wmag 30.07.2012 09:09

делаю конструктор из DIV. Замена фона. проблемы.
 
Только-только учусь...

Делаю форму - конструктор на сайте, событие onclick выдает ошибку:
Uncaught SyntaxError: Unexpected identifier test.php:62
Uncaught ReferenceError: jsneck is not defined test.php:63

соответственно строки:
<li onclick="finddiv(); javascript: document.getElementById('jsneck').style.background Image=='url(http://192.168.1.150/web/body0.png)'; "> Open Neck </li>
<li onclick="javascript: document.getElementById('constr_neck').style.backg round Image='url(http://192.168.1.150/web/body1.png)';"> Квадрат </li>

------------

на 61-ой строке вроде как присваиваю значение jsneck, но все-равно неработает.

Кому не очень трудно, гляньте пожалуйста что не так делаю. :help:

Код:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
.main {width: 950px; height:100%; border: 0px; margin: 0px; padding: 0px} 
 
.constr_main {width:245px; height:474px; border: 0px; margin: 0px; padding: 0px}

.constr_background {width:244px; height:474px; border: 0px; margin: 0px; padding: 0px; background-image: url(http://192.168.1.150/web/dp.jpg)}
 
.constr_head {width:245px; height:70px; background-image: url(http://192.168.1.150/web/head.jpg);}

.constr_neck {width:245px; height:138px; background-image: url(http://192.168.1.150/web/body0.png);}

.constr_arms {width:245px; height: 202px; margin-top: -138px; background-image: url(http://192.168.1.150/web/arms1.png);}

.constr_legs {width:245px; height:266px; margin-top: -64px; background-image: url(http://192.168.1.150/web/leg1.png);} 
 
 
 
.choose {width:685px; height: 200px;margin-top: -400px; margin-left: 250px;}

.choose_neck {width:150px; height:200px;}
.choose_arms {width:150px; height:200px;}
.choose_legs {width:150px; height:200px;}
.floatleft {float: left;}

  </style>
 </head>
 <script type="text/javascript" language="javascript">
function finddiv()       
            {       
        // ищем нужный нам тег информера
                        var jsneck = document.getElementsByClassName("constr_neck");
                        var jsarms = document.getElementsByClassName("constr_arms");
                        var jslegs = document.getElementsByClassName("constr_legs");
                }
</script>
 <body>
 
<div class="main">
<div class="constr_main floatleft">
        <div class="constr_background">
                <div class="constr_head">               
                </div>
                <div class="constr_neck">               
                </div>
                <div class="constr_arms">               
                </div>
                <div class="constr_legs">               
                </div>
        </div>
 </div>
 
 <div class="choose floatleft">
        <div class="choose_neck floatleft">
        Choose Neck:
                <ul>
                <li onclick="finddiv(); javascript: document.getElementById('jsneck').style.background Image=='url(http://192.168.1.150/web/body0.png)'; "> Open Neck </li>
                <li onclick="javascript: document.getElementById('constr_neck').style.background Image='url(http://192.168.1.150/web/body1.png)';"> Квадрат </li>
                <li onclick="javascript: jsneck.style.backgroundImage='url(http://192.168.1.150/web/body2.png)';"> Треугольник </li>
                <li onclick="javascript: jsneck.style.backgroundImage='url(http://192.168.1.150/web/body3.png)';"> Полукруг </li>
                </ul>
        </div>
</div>
</div>

</body>


vadim5june 30.07.2012 09:19

вместо
<li onclick="finddiv(); javascript: document.getElementById('jsneck').style.background Image=='url(http://192.168.1.150/web/body0.png)'; "> Open Neck </li>

нужно
<li onclick="finddiv(); document.getElementById('jsneck').style.backgroundImage='url(http://192.168.1.150/web/body0.png)'; "> Open Neck </li>

Dmitriyff 30.07.2012 09:26

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

при клике по OpenNeck ошибка у вас нету элемента с id jsneck
при клике по Квадрат у вас нету элемента с id constr_neck

Dmitriyff 30.07.2012 09:27

Ну и да javascript: не нужен

bes 30.07.2012 10:39

Цитата:

Сообщение от Dmitriyff
при клике по Квадрат у вас нету элемента с id constr_neck

этот есть, может дело в этом background Image (пробел)

Цитата:

Сообщение от Dmitriyff
переменные оппределяются в функции, и уничтожаются после выхода из нее,

есть ещё замыкания

Dmitriyff 30.07.2012 17:57

Цитата:

Сообщение от bes
этот есть, может дело в этом background Image (пробел)

Ну в этом тоже проблема, но где вы увидили элемент с id constr_neck??? три раза искал, покажите пожалуйста

Цитата:

Сообщение от bes
есть ещё замыкания

вы их тут видите? или меня поучаете?

bes 30.07.2012 18:19

Цитата:

Сообщение от Dmitriyff
Ну в этом тоже проблема, но где вы увидили элемент с id constr_neck??? три раза искал, покажите пожалуйста

48 строчка
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
.main {width: 950px; height:100%; border: 0px; margin: 0px; padding: 0px}  
  
.constr_main {width:245px; height:474px; border: 0px; margin: 0px; padding: 0px}

.constr_background {width:244px; height:474px; border: 0px; margin: 0px; padding: 0px; background-image: url(http://192.168.1.150/web/dp.jpg)}
  
.constr_head {width:245px; height:70px; background-image: url(http://192.168.1.150/web/head.jpg);}

.constr_neck {width:245px; height:138px; background-image: url(http://192.168.1.150/web/body0.png);}

.constr_arms {width:245px; height: 202px; margin-top: -138px; background-image: url(http://192.168.1.150/web/arms1.png);}

.constr_legs {width:245px; height:266px; margin-top: -64px; background-image: url(http://192.168.1.150/web/leg1.png);}  
  
  
  
.choose {width:685px; height: 200px;margin-top: -400px; margin-left: 250px;}

.choose_neck {width:150px; height:200px;}
.choose_arms {width:150px; height:200px;}
.choose_legs {width:150px; height:200px;}
.floatleft {float: left;}

  </style>
 </head>
 <script type="text/javascript" language="javascript">
function finddiv() 	
    	{ 	
	// ищем нужный нам тег информера
			var jsneck = document.getElementsByClassName("constr_neck");
			var jsarms = document.getElementsByClassName("constr_arms");
			var jslegs = document.getElementsByClassName("constr_legs");
		}
</script> 
 <body>
 
<div class="main">
<div class="constr_main floatleft">
	<div class="constr_background">
		<div class="constr_head">		
		</div>
		<div class="constr_neck">		
		</div>
		<div class="constr_arms">		
		</div>
		<div class="constr_legs">		
		</div>
	</div>
 </div>
 
 <div class="choose floatleft">
	<div class="choose_neck floatleft">
	Choose Neck:
		<ul>
		<li onclick="finddiv(); javascript: document.getElementById('jsneck').style.background Image=='url(http://192.168.1.150/web/body0.png)'; "> Open Neck </li>
		<li onclick="javascript: document.getElementById('constr_neck').style.background Image='url(http://192.168.1.150/web/body1.png)';"> Квадрат </li>
		<li onclick="javascript: jsneck.style.backgroundImage='url(http://192.168.1.150/web/body2.png)';"> Треугольник </li>
		<li onclick="javascript: jsneck.style.backgroundImage='url(http://192.168.1.150/web/body3.png)';"> Полукруг </li>
		</ul>
	</div>
</div>
</div> 

</body>

Хотя пардон, ваша правда

Цитата:

Сообщение от Dmitriyff
вы их тут видите? или меня поучаете?

фраза звучала как абсолютная истина, поэтому уточнил (если об этом знали, не воспринимайте на свой счёт, если не знали - воспринимайте :) )

Dmitriyff 30.07.2012 18:32

Приятно иметь с вами дело =-)

wmag 01.08.2012 11:40

Посольку я только осваиваюсь в JAvaScript програмировании, мои вопросы могут звучать абсолютно идиотскими, ноя стараюсь формулировать свои вопросы исходя из того как я вижу язык. (хотя исходя из того, что я только учусь - вижу я его не очень четко)

Начал Использовать CHROME для отладки и проверки команд.

Dmitriyff, спасисбо за замечание про кничтожение переменных по окончании функции - учту.

(а как посоветуете их определять, что бы они не уничтожались? Если это вообще возможно простым путем)

vadim5june, вы писали:
<li onclick="finddiv(); document.getElementById('jsneck').style.background Image='url(http://192.168.1.150/web/body0.png)'; "> Open Neck </li>

Спасибо, работает.

Стало быть работать с элементами, по getElementsByClassName - нельзя?

а если мне надо будет одним кликом изменить все элементы определнного Класса?

vadim5june 01.08.2012 12:07

Цитата:

Сообщение от wmag
Стало быть работать с элементами, по getElementsByClassName - нельзя?

Если без Jquery работать то всегда проблемы с кроссбраузерность возникнут-нужно писать функции для браузеров которые не поддерживают
есть еще querySelector и querySelectorAll
http://javascript.ru/blog/subzey/que...orAll-praktike
более мощные-там и по классу можно выборку сделать


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