делаю конструктор из 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> |
вместо
<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>
|
переменные оппределяются в функции, и уничтожаются после выхода из нее,
вот почитать при клике по OpenNeck ошибка у вас нету элемента с id jsneck при клике по Квадрат у вас нету элемента с id constr_neck |
Ну и да javascript: не нужен
|
Цитата:
Цитата:
|
Цитата:
Цитата:
|
Цитата:
<!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>
Хотя пардон, ваша правда Цитата:
|
Приятно иметь с вами дело =-)
|
Посольку я только осваиваюсь в 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 - нельзя? а если мне надо будет одним кликом изменить все элементы определнного Класса? |
Цитата:
есть еще querySelector и querySelectorAll http://javascript.ru/blog/subzey/que...orAll-praktike более мощные-там и по классу можно выборку сделать |
Цитата:
Цитата:
как вариант для данного случая подойдет повешать события элементы списка отдельно замкнув в них необходимые переменные, выглядеть это будет примерно так var init = function init() { var jsneck, ... // и т.п. // вешаем события на onclick li.onclick = function() { // тута li какой-то элемент из списка // jsneck тут будет доступна } } init(); //jsneck тута не будет доступна |
| Часовой пояс GMT +3, время: 12:43. |