Вызов функции не по событию

vvzone · May 11, 2010

<html>
<head>
<script language="javascript" type="text/javascript">
function paint(){
this.parentNode.parentNode.getElementsByTagName('div')[0].style.background='red';
}
</script>
</head>
<body>
<div><h4>All</h4>
 <div><h5>Sub all-1</h5>
 </div>
 <div><h5>Sub all-2</h5>
 <script type="text/javascript">
 paint();
 </script>
 <a href="#" onClick="this.parentNode.parentNode.getElementsByTagName('div')[0].style.background='red';">click</a>
 </div>
</div>

</body>
</html>

Собственно вопрос у меня: почему по ссылке и событию onClick все срабатывает как надо, а при вызове функции paint() - ничего не происходит?

Veseloff · May 11, 2010

this - не определено. Попробуйте в начале функции дописать alert(this) и всё станет понятно.

psywalker · May 11, 2010

Потому-что this в теле функции ссылается на главный-глобальный объект window, а внутри события ссылки, на объект вызова, т.е. на саму ссылку.

vvzone · May 11, 2010

<html>
<head>
<script language="javascript" type="text/javascript">
function paint(o){
o.parentNode.parentNode.getElementsByTagName('div')[0].style.background='red';
}
</script>
</head>
<body>
<div><h4>All</h4>
 <div><h5>Sub all-1</h5>
 </div>
 <div><h5>Sub all-2</h5>
 <script type="text/javascript">
 paint(this);
 </script>
 <a href="#" onClick="this.parentNode.parentNode.getElementsByTagName('div')[0].style.background='red';">click</a>
 </div>
</div>

</body>
</html>

Ага. Тогда я добавляю к вызову paint(this);, а в скрипте пытаюсь принять этот this в качестве перемнной (как выше) и это снова не работает... Что мне нужно сделать, чтобы у меня this в функицию передавался в схожем контексте?

Edited May 11, 2010 by vvzone

vvzone · May 11, 2010

вызовы вида paint.call() тож результата не дают, где я допускаю ошибку?

Great Rash · May 11, 2010

<html>
<head>
<script type="text/javascript">
function paint(o){
o.parentNode.parentNode.getElementsByTagName('div')[0].style.background='red';
}
</script>
</head>
<body>
<div><h4>All</h4>
<div><h5>Sub all-1</h5>
</div>
<div><h5>Sub all-2</h5>
<a href="#" onclick="paint(this);">click</a>
</div>
</div>

</body>
</html>

psywalker · May 11, 2010

Или

<html>
<head>

</head>
<body>
<div><h4>All</h4>
<div><h5>Sub all-1</h5>
</div>
<div><h5>Sub all-2</h5>
<script type="text/javascript">
function paint(){
this.document.getElementsByTagName('div')[0].getElementsByTagName('div')[0].style.background='red';
}

paint()
</script>

<a href="#" onClick="this.parentNode.parentNode.getElementsByTagName('div')[0].style.background='red';alert(this.parentNode.parentNode)">click</a>
</div>
</div>

</body>
</html>

vvzone · May 11, 2010

<div><h5>Sub all-2</h5>
<a href="#" onclick="paint(this);">click</a>
</div>

Мне надо чтобы функция вызывалась всегда. Событие onclick мне совершенно не подходит. Вопрос именно в том и заключается, что вызов осуществляется не по событию.

Или

<script type="text/javascript">
function paint(){
this.document.getElementsByTagName('div')[0].getElementsByTagName('div')[0].style.background='red';
}

paint()
</script>

Работает, спасибо, но только в этом частном случае А если у меня идет вывод таких div парами несколько десятков? Не могу же я каждый раз переопределять функцию или имя им менять...

По этому меня и интересует обьявить один раз и вызывать только в тех местах, куда в сгенериную страницу php будет вставлять конструкцию <script type="text/javascript">paint();</script>

Edited May 11, 2010 by vvzone

Great Rash · May 11, 2010

не понятно, что конкретно вам надо. Опишите, что вы хотите получить ибо из приведенного кода и скудного описания ничего не понять.

psywalker · May 11, 2010

Мне надо чтобы функция вызывалась всегда. Событие onclick мне совершенно не подходит. Вопрос именно в том и заключается, что вызов осуществляется не по событию.
Работает, спасибо, но только в этом частном случае А если у меня идет вывод таких div парами несколько десятков? Не могу же я каждый раз переопределять функцию или имя им менять...
По этому меня и интересует обьявить один раз и вызывать только в тех местах, куда в сгенериную страницу php будет вставлять конструкцию <script type="text/javascript">paint();</script>

Не понял тебя. А объясни плиз задачу прям подробно.

vvzone · May 11, 2010

Задача:

Есть некий вывод:

<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>

Он повторяется множество раз (неопределенное множество):

Например, три раза:

<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>
<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>
<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>

Для этого вывода определена функция раскраски первого вложенного дива:

function paint(){
this.parentNode.parentNode.getElementsByTagName('div')[0].style.background='red';
}

Те: Предполагается вызывать эту функцию из второго вложенного дива.

То есть:

Там где во втором вложенном диве есть конструкция вызова paint() - необходимо раскрасить первый вложенный див. Именно по этому поиск в don через parentNode. Так как конструкции повторяются неопределенное количество раз и они полностью одинаковы.

Проблема:

<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>
<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5><script TYPE="JAVASCRIPT"> PAINT(); </SCRIPT></div> // Второй вложенный див
</div>

Не могу передать контекст this.

Great Rash · May 11, 2010

По какому событию будет происходить окрашивание? Почему надо вызывать именно из второго дива?

vvzone · May 11, 2010

По какому событию будет происходить окрашивание? Почему надо вызывать именно из второго дива?

Окрашивание будет происходить на основании того есть ли в очередном

<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>

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

Не будет окрашиваться:

<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>

Будет:

<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5><script>PAINT();</SCRIPT></div> // Второй вложенный див
</div>

Из второго дива нужно вызывать так-как paint() вставляется на основе содержимого второго дива. Предварительно обработать содержимое невозможно в данном случае.

PS: А чо?

PPS: Как я написал в самом первом посте мне нужна помощь по вызову функции с передачей контекста. Поиск по DOM и все остальное менять - тут не катит. Именно из второго дива вызов функции. Вопрос тот же... Как передать контекст не прибегая к onClick и прочей нечисти?

psywalker · May 11, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>E</title>

<body>
<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>
<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>
<div><h4>All</h4> //Основной див
<div><h5>Sub all-1</h5></div> // Первый вложенный див
<div><h5>Sub all-2</h5></div> // Второй вложенный див
</div>
<script type="text/javascript">


function paint(){
var bodyNode= document.getElementsByTagName('body').item(0)
var children  = bodyNode.childNodes

for(var i=0;i<children.length;i++){
	if(children[i].nodeName == 'DIV'){
		children[i].getElementsByTagName('div').item(1).style.background='red';

	}
}
}

paint()
</script>
</body>
</html>

Great Rash · May 11, 2010

<script type="text/javascript">
	/*
		Written by Jonathan Snook, http://www.snook.ca/jonathan
		Add-ons by Robert Nyman, http://www.robertnyman.com
	*/

	function getElementsByClassName(oElm, strTagName, strClassName) {
		var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
		var arrReturnElements = new Array();
		strClassName = strClassName.replace(/\-/g, "\\-");
		var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
		var oElement;

		for(var i=0; i<arrElements.length; i++) {
			oElement = arrElements[i];

			if (oRegExp.test(oElement.className)) {
				arrReturnElements.push(oElement);
			}
		}

		return (arrReturnElements);
	}

	window.onload = function() {
		var divs =  getElementsByClassName(document, 'div', 'secondDiv');

		for (var i = 0; i < divs.length; i++) {
			divs[i].parentNode.parentNode.getElementsByTagName('div')[0].style.background = 'red';
		}
	}
</script>

<div>
	<h4>All</h4> //Основной див
	<div>
		<h5>Sub all-1</h5>
	</div> // Первый вложенный див
	<div class="secondDiv">
		<h5>Sub all-2</h5>
	</div> // Второй вложенный див
</div>

<div>
	<h4>All</h4> //Основной див
	<div>
		<h5>Sub all-1</h5>
	</div> // Первый вложенный див
	<div class="secondDiv">
		<h5>Sub all-2</h5>
	</div> // Второй вложенный див
</div>

<div>
	<h4>All</h4> //Основной див
	<div>
		<h5>Sub all-1</h5>
	</div> // Первый вложенный див
	<div class="secondDiv">
		<h5>Sub all-2</h5>
	</div> // Второй вложенный див
</div>

по идее должно быть то, что вам нужно

vvzone · May 11, 2010

<script type="text/javascript">


function paint(){
var bodyNode= document.getElementsByTagName('body').item(0)
var children  = bodyNode.childNodes

for(var i=0;i<children.length;i++){
	if(children[i].nodeName == 'DIV'){
		children[i].getElementsByTagName('div').item(1).style.background='red';

	}
}
}

paint()
</script>

Не опять не катит. Как я уже писал выше раскрашивать первый вложенный див нужно только в той конструкии в которую вложен вызов paint();

А этот раскрасит все или до того места где произодет вызов.

vvzone · May 11, 2010

	function getElementsByClassName(oElm, strTagName, strClassName) {

Идея понятна, спасибо

Но один вопрос остался тем же (а как все таки вызывать функцию в контексте DOM, без событий onClick), а второй добавился:

<html>
<head>
<script language="javascript" type="text/javascript">

	function getElementsByClassName(oElm, strTagName, strClassName) {
		var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
		var arrReturnElements = new Array();
		strClassName = strClassName.replace(/\-/g, "\\-");
		var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
		var oElement;

		for(var i=0; i<arrElements.length; i++) {
			oElement = arrElements[i];

			if (oRegExp.test(oElement.className)) {
				arrReturnElements.push(oElement);
			}
		}

		return (arrReturnElements);
	}

	window.onload = function() {
		var divs =  getElementsByClassName(document, 'div', 'get_red');

		for (var i = 0; i < divs.length; i++) {
			divs[i].parentNode.parentNode.getElementsByTagName('div')[0].style.background = 'red';
		}
	}

</script>
</head>
<body>
<div><h4>All</h4>
  <div>
	<h5>Sub all-1</h5>
  </div>
  <div>
	<h5>Sub all-2</h5>
  </div>
</div>
<div><h4>All</h4>
  <div>
	<h5>Sub all-1</h5>
  </div>
  <div>
	<h5>Sub all-2</h5>
  </div>
</div>
<div><h4>All</h4>
  <div>
	<h5>Sub all-1</h5>
  </div>
  <div class="get_red">
	<h5>Sub all-2</h5>
  </div>
</div>
</body>
</html>

То есть: нужно раскрасить в конструкции где для второго дива есть класс "get_red". Выглядит все отлично, но на практике не работает

Вернее красит почему то не для того элемента. Хотя parentNode относительно div. вроде?

Красит всегда первую конструкцию...

Edited May 11, 2010 by vvzone

Great Rash · May 11, 2010

Но один вопрос остался тем же (а как все таки вызывать функцию в контексте DOM, без событий onClick)

Как вы собираетесь вызывать функцию без событий?

vvzone · May 11, 2010

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

Как вы собираетесь вызывать функцию без событий?

Собираюсь ее вызывать непосредственно.

<script>
function slovo(){
document.write('Hello world!');
}
</script>
...
html....
....
<script>
slovo();
</script>

И отлично вызывается, тока this работает почему-то только с щелчками мышью и прочей ерундой. А этого не может быть, потому, что не может быть никогда. Наверняка можно как-нибудь через call или apply контекст dom передать...

Ладно, всем спасибо, я так понял, что оптимал переписать вывод для getElementsByClassName. Но если все таки кто нибудь узнает как можно передавать положение в DOM в функцию без событий типа onClick и тп - буду оч благодарен!

hf3 · May 11, 2010

Честно методы решение задачи мягко говоря кривоваты.

тем более если у вас есть доступ к ПХП. Почему не отправить сразу класс нужному диву ? Или зачем отправлять именно функцию?

http://flameheart.no-ip.org/Begin1/nodeName.html рулите отсюда. Работает только в ИЕ. Но смысл общий передаёт.

УПД - уже везде работает. Но все равно сделайте по другому. То что вы хотите - это не нормально

Но если все таки кто нибудь узнает как можно передавать положение в DOM в функцию без событий типа onClick и тп - буду оч благодарен!

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

Edited May 11, 2010 by hf3

Searcher · May 11, 2010

Да в формирующем страницу php-скрипте распределить нужным элементам соответствующие классы и все. Что вы мудрите то?

Ну или есть какие-то принципиальные ограничения по доступу к скрипту, повесьте на onload для <body> парсинг всей страницы или DOM-дерева JS-ом и изменяйе свойства элементов, как заблагорассудится.

vvzone · May 11, 2010

Честно методы решение задачи мягко говоря кривоваты.
тем более если у вас есть доступ к ПХП. Почему не отправить сразу класс нужному диву ? Или зачем отправлять именно функцию?

Потому что в php идет построчный вывод неких данных, и условие на перекрашивание начального заголовка исполняется в конце этого вывода. Найдете способ вернуться назад средствами php - напишите, буду знать

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

Почему в онКлик исполнять функцию логично, а вне его не логично?

hf3 · May 11, 2010

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

а заранее проверить? Выложите код ПХП лучше.

Почему в онКлик исполнять функцию логично, а вне его не логично?

исполнять - логично

А вот требовать от неё чтобы она знала контекст исполнения по её местоположению - нет

ИЛи меняйте ПХП или в противном случает только так как я написал выше - парсить страницу Жсом.

Edited May 11, 2010 by hf3

vvzone · May 11, 2010

а заранее проверить? Выложите код ПХП лучше.

Там чудовище. Большое. И изначально некоторые фичи, которые хочет заказчик (вроде подсветок и тп) не планировались. И каждый раз когда он захочет "чтоб здесь было синенькое, а там красненькое" перелопачивать исходную прогу - мне влом. Да, предварительно системный вывод не сторится, а выводится по мере выполнения проги.

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

А насчет выполнения функция и контекста, а как же call и apply?

И потом, опять же, вы меня не убедили, что есть кардинальная разница между тем, чтобы определять ее местоположение в dom при исполнении ее по событию или просто по вызову. Ну хочет кто-то исполнять какую-то функцию по клику, но что теперь все через клики делать, если нужно к документу "пост-обработку" применить

PS: В любом случае, спасибо...

Edited May 11, 2010 by vvzone

hf3 · May 11, 2010

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

Четкое ТЗ спасет вас)

А насчет выполнения функция и контекста, а как же call и apply?

Они бы помогли. но тогда для каждого paint() нужно указывать свой контекст

что опять же связано с переделкой исходного ПХП

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

разница есть. Фукцния - это не тег. поэтому она вообще никакого отношения к ДОМу не имеет. поэтому вы можете написать их куда угодно. Сама по себе она контекст нужный не определит.

Так что повторюсь- либо переделывайте ПХП(лучше) либо пост - обработка (хуже)

а вообще смешивать ХТМЛ и ЖС - плохо.

выносите все в Хеад или ещё лучше в отдельный файл.

Sign In

Вызов функции не по событию

Question

Link to comment

Share on other sites

24 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

Join the conversation

Обсуждения

Important Information