Вызов функции при клике

@daslex · Регистрация: 02.08.2011

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
<script type='text/javascript' >
   function MyFunc(S){
       alert(S);  //показываю принятый текст.
   }
</script>

JavaScript
1
2
3
4
5
6
<div id="id2" >
Кликни меня
<script>
document.getElementById("id2").onclick = MyFunc(<?php echo '100'; ?>);
</script>
</div>

По нажатию на "Кликни меня" должно выскочить alert с текстом 100.

У меня так получается, что при загрузке страницы вылезает это 100, а надо, чтобы я кликнул по тексту и оно вылезло.

@BANO · 19.08.2015, 15:00

daslex,

JavaScript
1
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo '100'; ?>);

@daslex · 19.08.2015, 15:08 **[ТС]**

Так сработало. Только если я использую не явное значение, а взятое из переменной php, то что-то не так получается.

JavaScript
1
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo $arr[0]; ?>);

$arr[0] - это ячейка массива с некоторым текстом.

@BANO · 19.08.2015, 15:15

daslex, у меня складывается ощущение, что вы не знаете ни php, ни js

будет

Добавлено через 3 минуты
daslex, у меня складывается ощущение, что вы не знаете ни php, ни js

будет работать

@Fedor Vlasenko · 19.08.2015, 15:16

JavaScript
1
2
3
<div id="id2" data-id="100" onclick="alert(this.getAttribute('data-id'))">
Кликни меня
</div>

data-id="<?php echo $arr[0]; ?>"

@daslex · 19.08.2015, 15:21 **[ТС]**

Я не знаю. ни одного языка. Ничего не поделать.

Я знаю, что на сайте WordPress эта конструкция ломает внешний вид страницы.
Вот 2 скрина. Справа изначально, слева после применения показанного тут кода. (для переменной из php)

@daslex · 19.08.2015, 15:22 **[ТС]**

Poznakomlus, нужен вызов функции, в которой несколько строчек кода. Это просто сокращенный вариант.

@Fedor Vlasenko · 19.08.2015, 15:28

HTML5
1
2
3
4
5
6
7
8
<div id="id2" data-id="100" onclick="test(this)">
Кликни меня
</div>
<script>
function test(el){
    alert(el.getAttribute('data-id'));
}
</script>

вариантов может быть много

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="id2" data-id="100">
Кликни меня
</div>
<script>
window.onload = function(){
    id2.onclick = function(){
        alert(this.getAttribute('data-id'));
    }
};
</script>

@BANO · 19.08.2015, 15:29

daslex, вы только аргументы и в функции запятыми отделяйте и в вызове

JavaScript
1
2
3
4
function test(a,b,c){
    alert(a,b,c)
}
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo join(',',$arr); ?>)

соответственно $arr - массив с аргументами, которые надо передать

Добавлено через 59 секунд
Poznakomlus, если использовать data-* то можно взять через .dataset, зачем же getAttribute

@Fedor Vlasenko · 19.08.2015, 15:34

Сообщение от BANO

Poznakomlus, если использовать data-* то можно взять через .dataset, зачем же getAttribute

для этого нужно сранить
http://caniuse.com/#search=dataset
и http://caniuse.com/#search=getAttribute
getAttribute везде поддерживается

@BANO · 19.08.2015, 15:37

Poznakomlus, честно говоря я не вижу смысла делать через data-*, так как это привязанно к dom и соответственно уменьшает скорость

других аргументов в пользу своего рещения я не нашёл

@daslex · 19.08.2015, 15:41 **[ТС]**

BANO, Я попробовал

JavaScript
1
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo join(',',$arr[0]); ?>);

И функцию просто с 1 параметром. Страницу не испортило, но эффекта не дало. Это если jQuerry, то у меня пока не будет работать.
___________

Сообщение от Poznakomlus

вариантов может быть много

Только вот это в WordPress приводит к глюку, картинки выше.

JavaScript
1
<div id="id2"; data-id=<?php echo $arr[0];?>; >

JavaScript
1
2
3
4
5
6
7
<script>
window.onload = function(){
    id2.onclick = function(){
        alert(this.getAttribute('data-id'));
    }
};
</script>

@Fedor Vlasenko · 19.08.2015, 15:49

Сообщение от BANO

я не вижу смысла делать через data-*

атрибуты могут иметь абсолютно любые названия не обязательно начинаться на data- главное, чтобы не конфликтовали с зарезервированными именами

Сообщение от BANO

так как это привязанно к dom и соответственно уменьшает скорость

вы даже не заметите

а теперь мой аргумент
js надо выносить в отдельный файл и не писать все в одной каше
мой код позволяет это сделать легко, а не строить js функцию динамически с помощью php
и не создавая js.php

PHP
1
2
3
4
<?php
header('Content-type: text/javascript; charset: UTF-8');
?>
alert('Это мой Js код');

Добавлено через 2 минуты

Сообщение от daslex

здесь забыли кавычки и лишнии ;
<div id="id2" data-id="<?php echo $arr[0];?>">

@BANO · 19.08.2015, 15:53

Сообщение от Poznakomlus

а не строить js функцию динамически с помощью php
и не создавая js.php

вот тут согласен

Сообщение от Poznakomlus

вы даже не заметите

а это не главное
.forEach и for тоже разницы почти нету, но всё же надо это учитывать при оптимизации

Сообщение от Poznakomlus

главное, чтобы не конфликтовали

вы мне дали ещё 1 аргумент в мою пользу, у меня вообще об этом задумываться не надо)))

<div id="id2"; data-id=<?php echo $arr[0];?>; >

@daslex · 19.08.2015, 16:02 **[ТС]**

Сообщение от Poznakomlus

здесь забыли кавычки и лишнии ;

HTML5
1
<div id="id2" data-id="<?php echo $arr[0];?>">

HTML5
1
2
3
<div id="id2" data-id="<?php echo $arr[0];?>">
Кликни меня
</div>

JavaScript
1
2
3
4
5
6
7
<script>
window.onload = function(){
    id2.onclick = function(){
        alert(this.getAttribute('data-id'));
    }
};
</script>

Глюк, который на картинках показан, все равно.

В общем, это уже не js, так что ответа не надо. Мне уже отвечали. Я просто подзабыл всё.
То, что я спросил сейчас - на это я получил несколько ответов. Спасибо.

@Fedor Vlasenko · 19.08.2015, 16:09

Сообщение от BANO

forEach и for

о да это две темные лошадки ведь forEach не кросброузерный причем в js он медленный а в php наоборот в последних версия быстрый
daslex, попробуйте в функцию вконце вставить return false или так

JavaScript
1
2
3
4
5
id2.onclick = function(e){
        alert(this.getAttribute('data-id'));
        e.stopPropagation ? e.stopPropagation() : (e.cancelBubble=true); // отмена всплытия события
        e.preventDefault ? e.preventDefault() : (e.returnValue=false);   // отмена действия браузера по-умолчанию
}

@daslex · 19.08.2015, 19:29 **[ТС]**

Poznakomlus, тут глюк не из-за javascript, а из-за сложного текста в переменной php. Этот вопрос касается php.

Со всеми листингами javascript в этой теме всё в порядке.

Добавлено через 3 часа 7 минут
Я исправил php текст таким образом, чтобы javascript его переваривал. Но это не привело к решению.

Пост №2

JavaScript
1
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo $arr[0]; ?>);

Не ломает страницу. Но текст из arr[0] вместо того, чтобы отобразиться только после нажатия на текст из div, просто прописывается в эту страницу.

@BANO · 19.08.2015, 19:59

daslex, вы в начале скрипта поставьте 
примерно так

HTML5
1
2
3
4
5
6
7
<script>
<!--
 
//.... тут уже ваш скрипт
 
//-->
</script>

@daslex · 19.08.2015, 23:59 **[ТС]**

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

Почему-то с предложенным вариантом с явным указанием числа работает. С указанием ячейки массива не работает(вообще ничего не происходит).
При этом проверка ячейки массива явным выводом средствами php показывает, что текст там есть.

Вот такой текст в ячейке $arr[0] при проверке php.

Текст ячейки массива

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML PUBLIC \’-//W3C//DTD HTML 4.01 Transitional//EN\’>
<meta http-equiv=\’content-type\’ content=\’text/html; charset=utf-8\’>
 
<link href=\’http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/styles/shCore.css\’ rel=\’stylesheet\’ type=\’text/css\’/>
<link href=\’http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/styles/shThemeDefault.css\’ rel=\’stylesheet\’ type=\’text/css\’/>
<script src=\’http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/scripts/shCore.js\’ type=\’text/javascript\’></script>
<script src=\’http://ci-plus-plus-snachala.ru/syntaxhighlighter_3.0.83/scripts/shBrushCpp.js\’ type=\’text/javascript\’></script>
<script language=\’javascript\’>
SyntaxHighlighter.all();
</script>
 
 
<!—————-КОД—————————–>
<pre class=\’brush: cpp\’>
#include &lt;iostream&gt;
 
using namespace std;
 
int main(){
setlocale(LC_ALL,&quot;&quot;);
int Height,Weight;
 
cout&lt;&lt;&quot;Введите Ваш рост и вес:\\n&quot;;
cin&gt;&gt;Height&gt;&gt;Weight;
 
cout&lt;&lt;&quot;Ваш рост: &quot;&lt;&lt;Height&lt;&lt;endl;
cout&lt;&lt;&quot;Ваш вес: &quot;&lt;&lt;Weight&lt;&lt;endl;
 
}
</pre>
<!—————-КОД—————————–>

Использовал вот этот вариант.

JavaScript
1
document.getElementById("id2").onclick = MyFunc.bind(null,<?php echo $arr[0]; ?>);

Пока без последнего совета (на комментарии).

@BANO · 20.08.2015, 09:43

daslex, ещё можно попробовать переносы строк экранировать

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

Вызов функции при клике

Решение

Решение

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	19.08.2015, 15:15
	daslex, у меня складывается ощущение, что вы не знаете ни php, ни js будет Добавлено через 3 минуты daslex, у меня складывается ощущение, что вы не знаете ни php, ни js будет работать 1

@daslex 1373 / 596 / 199 Регистрация: 02.08.2011 Сообщений: 2,886
	19.08.2015, 15:21 [ТС]
	Я не знаю. ни одного языка. Ничего не поделать. Я знаю, что на сайте WordPress эта конструкция ломает внешний вид страницы. Вот 2 скрина. Справа изначально, слева после применения показанного тут кода. (для переменной из php) Миниатюры 0

@daslex 1373 / 596 / 199 Регистрация: 02.08.2011 Сообщений: 2,886
	19.08.2015, 15:22 [ТС]
	Poznakomlus, нужен вызов функции, в которой несколько строчек кода. Это просто сокращенный вариант. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	19.08.2015, 15:37
	Poznakomlus, честно говоря я не вижу смысла делать через data-*, так как это привязанно к dom и соответственно уменьшает скорость других аргументов в пользу своего рещения я не нашёл 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	20.08.2015, 09:43
	daslex, ещё можно попробовать переносы строк экранировать 1