Картинка странно меняет атрибут!

psywalker · January 15, 2010

Добрый вечер!

У нас есть:

<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')

		function test(){

				if(img.src="spice.jpg"){
					img.src="spice.gif"
					img.style.display = "none"
				}
		}

</script>

Сразу вопросы:

1) При таком коде Почему картинка при нажатии на input всё равно получает img.style.display = "none, при том, что атрибут у неё явно НЕ с jpg на конце?

2) Как правильно в if делать проверку на значение атрибута .src у картинки? Я написал так if(img.src="spice.jpg"), но чую, что это какая та чушь.

3) Что означает эта запись в if (img.src="spice.jpg"), как правильно её произнести?

Заранее благодарю. Кстати эта тема ещё только началась, будут дополнительные вопросы, только после выяснения этих))

@LEXXX_NF · January 15, 2010

1) "=" и "==" - это две разные операции. Присвоение ("=") возвращет результат присвоения, который чаще всего преобразуется в TRUE;

2) cм. п. 1;

3) не понятно

gesandte · January 15, 2010

Добрый вечер!
У нас есть:
<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')

		function test(){

				if(img.src="spice.jpg"){
					img.src="spice.gif"
					img.style.display = "none"
				}
		}

</script>
Сразу вопросы:
3) Что означает эта запись в if (img.src="spice.jpg"), как правильно её произнести?
Заранее благодарю. Кстати эта тема ещё только началась, будут дополнительные вопросы, только после выяснения этих))

при условии что там все таки не =, а ==, то примерно так

если img.src равно spice.jpg, то img.src равно spice.gif и img.style.display = "none"

Хотя в данной транскрипции получается бред)))

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

Тогда получим условие

если img.src не равно spice.jpg, то img.src равно spice.gif и Img.style.display = "none"

Пс. Если че не так, палкой не бить))) ява вообще не знаю, основываюсь на знаниях пхп)

Edited January 15, 2010 by gesandte

3ABAPKA · January 16, 2010

Сразу вопросы:
1) При таком коде Почему картинка при нажатии на input всё равно получает img.style.display = "none, при том, что атрибут у неё явно НЕ с jpg на конце?
2) Как правильно в if делать проверку на значение атрибута .src у картинки? Я написал так if(img.src="spice.jpg"), но чую, что это какая та чушь.
3) Что означает эта запись в if (img.src="spice.jpg"), как правильно её произнести?
Заранее благодарю. Кстати эта тема ещё только началась, будут дополнительные вопросы, только после выяснения этих))

1) и 2) Потому что условие всегда выполняется, ничего не проверяется, а присваивается значение, лучше написать if(img.src == "spice.jpg") или

if(img.src != "spice.jpg")

3) Примерно = "Если (значению пути картинки присвоить spice.jpg)", а хотелось бы "Если путь картинки равен spice.jpg"

if (img.src="spice.jpg") if (img.src == "spice.jpg")

Там вот в коде есть еще такой момент не понятный:

img.src="spice.gif"

img.style.display = "none"

Если условие верно то присвоить значению пути spice.gif и установить стиль для изображения display = none

Думается это произойдет так быстро, что юзер не заметит spice.gif, если изображение все равно скрывается нужна ли строка img.src="spice.gif"

Может ты хотел сделать примерно так:

if (img.src == "spice.jpg"){
img.src="spice.gif";
}else{
img.style.display = "none";
}

psywalker · January 16, 2010

Спасибо ребят. Значит я понял следующее.

1) if(img.src = "spice.jpg") Выполнять проверку таким образом - это полный бред, потому-что условие всегда будет true, так как мы тут просто спрашиваем: Если img.src присваивается "spice.jpg", то мы выполняем этот блок?

2) Если я правильно понял, то проверка на равенство значения атрибута выполняется например так if(img.src=="spice.gif"), и вот тут мы уже НЕ присваиваем, а Именно сравниваем значение атрибута src у картинки? Т.е как бы спрашиваем, "Если значение атрибута Равно "spice.gif", то мы выполняем блок"?

Продолжим:

Вопросы

<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')


		function test(){


				if (img.src == "spice.gif"){
					img.src="spice.jpg";

				}else{img.style.display = "none";}

		}

</script>

3) Почему при таких раскладах Срабатывает именно второй блок кода (else{img.style.display = "none";}), а не Первый, ведь сейчас я уже проверяю на равенство значение атрибута у картинки, а он равен именно "spice.gif"?

4) Как мне правильно составить условия: Я хочу чтобы "Если атрибут у картинки имеет значение "spice.gif", то поменять его на "spice.jpg", а если он "spice.jpg", то поменять его на "spice.gif"... и так далее чтобы постоянно менялось в зависимости от значения атрибута. "?

gesandte · January 16, 2010

Кароч косяк походу тут

<html>
<title>js image</title>
<body>

<input type="button" value="click here" onclick="test()" /><br />
<img id="img" src="spice.png" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img');
	function test() {
		if (img.src == "spice.png") {
			img.src="spice.jpg";

		} else {
			img.style.display = "none";
			window.alert(img.src);
		}
	}

</script>

</body>
</html>

img.src имеет в качестве значения не имя файла, а путь

Edited January 16, 2010 by gesandte

Nekromancer · January 16, 2010

"Если атрибут у картинки имеет значение "spice.gif", то поменять его на "spice.jpg", а если он "spice.jpg", то поменять его на "spice.gif"... и так далее чтобы постоянно менялось в зависимости от значения атрибута. "?

ну значит дисплэй ноне присваивать то не нужно.. кстати.. было бы правильно всё таки с начала документацию почитать.. http://javascript.ru/basic/operators

var str = img.src;
var test = str.split('/');

if(test[test.length-1]=='spice.gif'){
 img.src='spice.jpg';
}else{
 img.src='spice.gif';
}

так наверно самый правильный вариант.. ну для поставленной задачи

Edited January 16, 2010 by Nekromancer

psywalker · January 16, 2010

Спасибо мужики, разобрался.

Но вот тогда главный вопрос:

<input type="button" value="Надо нажать меня" onclick="test()" /><br />
<img id="img" src="spice.gif" alt="" />

<script type="text/javascript">
	var img = document.getElementById('img')


		function test(){

				if (img.getAttribute('src') == "spice.gif"){
					img.src="spice.jpg";

				}else if(img.getAttribute('src') == "spice.jpg"){
					img.src="spice.gif";

				}
		}


</script>

При таких раскладах, картинка меняет jpg на gif при нажатии на Импут. Всё хорошо, НО как мне сделать так, чтобы и сама картинка меняла свой атрибут <img id="img" src="spice.gif" alt="" /> ?

LunatiK · January 16, 2010

А почему ты думаешь что этого не происходит? FireBug'ом погляди

psywalker · January 16, 2010

А почему ты думаешь что этого не происходит? FireBug'ом погляди

Да, файрбагом я это вижу, НО мне же нужно чтобы именно в картинке. Или это не важно?

Justnewone · January 16, 2010

Да, файрбагом я это вижу, НО мне же нужно чтобы именно в картинке. Или это не важно?

А это только на стороне сервера

hf3 · January 16, 2010

Я правильно понимаю, что ты имеешь ввиду - то раз картинка меняется - то измменения в Дом дереве Браузера происходят.

При этом ни файрбаг ни коды исходные страницы - этого не отражают.

psywalker · January 16, 2010

Я правильно понимаю, что ты имеешь ввиду - то раз картинка меняется - то измменения в Дом дереве Браузера происходят.
При этом ни файрбаг ни коды исходные страницы - этого не отражают.

Ну если в ДОМе происходят изменения, то почемубы не произвести изменение в самой ноде, чтобы мне жилось спокойно?

Nekromancer · January 16, 2010

в ней изменения и происходят..

psywalker · January 16, 2010

в ней изменения и происходят..

Мне нужно чтобы я открыл HTML код и лично увидел это тут <img id="img" src="spice.gif" alt="" /> - Это реал?

alexspb · January 16, 2010

Мне нужно чтобы я открыл HTML код и лично увидел это тут <img id="img" src="spice.gif" alt="" /> - Это реал?

Создайте статичную страничку, или используйте любой серверный язык для формирования HTML-кода страницы - только так сервер отдает браузеру HTML. Edited January 16, 2010 by alexspb

psywalker · January 16, 2010

Создайте статичную страничку, или используйте любой серверный язык для формирования HTML-кода страницы - только так сервер отдает браузеру HTML.

Ааа, вот оно что, значит тока ПХП может тут помочь? Ясненько, спасибо. Но тогда вопрос:

Но в принципе если в ДОМе всё и так меняется, этого вполне хватит?

Nekromancer · January 16, 2010

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

psywalker · January 16, 2010

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

Вот именно, что при малейшей перезагрузке мой скрипт полетит к чертям, тогда какой смысл во-всём этом?

LunatiK · January 16, 2010

Фаир баг показывает изменения внесённые яваскриптом. А то что ты смотриш код страницы - это страница взятая из кеша браузера, это то, что изначально отдал сервер.

Харош тупить.

psywalker · January 16, 2010

Фаир баг показывает изменения внесённые яваскриптом. А то что ты смотриш код страницы - это страница взятая из кеша браузера, это то, что изначально отдал сервер.
Харош тупить.

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

Justnewone · January 16, 2010

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

может и после того будут актуальны. Если например на куку повязаны или еще как. Вобщем, исходный код можно изменить только на стороне сервера, JS меняет на стороне клиента.

hf3 · January 17, 2010

Хтттп протокол не умеет сохранять состояния -

Поэтому либо

1) Делаем это вручную скрытым полем с вьюстэйт - привет АСП.НЕТ!)

2) Куками.

Но на практике это бывает редко нужно. Обычно это делается серверными скриптами - к примеру ещё на сервере определить какой браузер и отдавать или прозрачную пнг или гифку…

в исходный код выдаётся то что прислал сервер. после первичной отрисовки - изменить его невозможно.

psywalker · January 17, 2010

Хтттп протокол не умеет сохранять состояния -
Поэтому либо
1) Делаем это вручную скрытым полем с вьюстэйт - привет АСП.НЕТ!)
2) Куками.
Но на практике это бывает редко нужно. Обычно это делается серверными скриптами - к примеру ещё на сервере определить какой браузер и отдавать или прозрачную пнг или гифку…
в исходный код выдаётся то что прислал сервер. после первичной отрисовки - изменить его невозможно.

Понял, в принципе вопрос решён. Для себя я понял, что JS может управлять поведением именно страницы, ДО перезагрузки.

Nekromancer · January 17, 2010

Понял, в принципе вопрос решён. Для себя я понял, что JS может управлять поведением именно страницы, ДО перезагрузки.

С поста 10го.. прости за грубость

psywalker · January 17, 2010

С поста 10го.. прости за грубость

Да ничего страшного, я сам виноват

Sign In

Картинка странно меняет атрибут!

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information