Форум

strange.tany · #1 (**permalink**) 15.01.2017, 15:50

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

window.onload = function() {
var next=getElementById("next");
next.onclick = newStyle;
};
function newStyle(e) {
e.target.src = "newPicture.png";
};

ksa · #2 (**permalink**) 16.01.2017, 08:34

Сообщение от strange.tany

функция не запускается

А вот это

Сообщение от strange.tany

var next=getElementById("next");

что такое?

Начинай тестировать свой код. Скорее всего он у тебя не рабочий...

Dilettante_Pro · #3 (**permalink**) 16.01.2017, 10:30

<img id="next" src="http://javascript.ru/cat/list/event.gif"/>
<script>
window.onload = function() {
var next=document.getElementById("next");
next.onclick = newStyle;
};
function newStyle() {
   this.src = "http://javascript.ru/cat/list/donkey.gif";
};
</script>

strange.tany · #4 (**permalink**) 16.01.2017, 11:41

У меня картинка, которую нужно изменить имеет id "next" и я с помощью getElementById беру этот элемент для взаимодействия с помощью js

ksa · #5 (**permalink**) 16.01.2017, 11:44

Сообщение от strange.tany

У меня картинка, которую нужно изменить имеет id "next" и я с помощью getElementById беру этот элемент

Так вот "берешь" ты не правильно.

getElementById отдельно не существует... Это метод элемента document.
Смотри пример от Dilettante_Pro.

strange.tany · #6 (**permalink**) 16.01.2017, 13:45

да, я тут в примере косанула, но проблема в том что у меня не работало именно window.onload (я для проверки запускала alert). Но в ту же очередь такая же функция работала в программе, где эта функция была единственной

ksa · #7 (**permalink**) 16.01.2017, 13:51

Сообщение от strange.tany

у меня не работало именно window.onload (я для проверки запускала alert)

Так может ты не так все делала... Без примера этого не понять.

strange.tany · #8 (**permalink**) 16.01.2017, 13:56

это нерабочий вариант:

<script>
	window.onload = function() {
		var nowStyle = 1;
		alert("функция запустилась");
		var next = document.getElementById("next");	
		next.onclick = newStyle;
		};
		function newStyle() {
		        this.src = "button2.png";
		};
</script>

Рабочий

window.onload = function() {
		alert ("function on");
		var images = document.getElementsByTagName("img");
		image.onclick = showAnswer;
	};
	function showAnswer(e) {
		e.target.src = "picture.jpg";

ksa · #9 (**permalink**) 16.01.2017, 14:02

Сообщение от strange.tany

это нерабочий вариант:

Ну почему же? Вполне рабочий...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
window.onload = function() {
	var nowStyle = 1;
	alert("функция запустилась");
	var next = document.getElementById("next");	
	next.onclick = newStyle;
};
function newStyle() {
		this.src = "http://javascript.ru/forum/images/smilies/laugh.gif";
};
</script>
</script>
</head>
<body>
<img id='next' src='http://javascript.ru/forum/images/smilies/smile.gif' />
</body>
</html>

Dilettante_Pro · #10 (**permalink**) 16.01.2017, 14:21

strange.tany,

Сообщение от strange.tany

Рабочий

А вот этот - нерабочий... Кроме алерта.

<script>
window.onload = function() {
		alert ("function on");
		var images = document.getElementsByTagName("img");
		image.onclick = showAnswer;
	};
	function showAnswer(e) {
		e.target.src = "http://javascript.ru/cat/list/donkey.gif";
        };
</script>
<img id="next" src="http://javascript.ru/cat/list/event.gif"/>

Исправленный вариант

<script>
window.onload = function() {
		alert ("function on");
		var images = document.getElementsByTagName("img");
		images[0].onclick = showAnswer;
	};
	function showAnswer(e) {
		e.target.src = "http://javascript.ru/cat/list/donkey.gif";
        };
</script>
<img id="next" src="http://javascript.ru/cat/list/event.gif"/>

Форум

Справочник

Discord чат

Курсы javascript