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

@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, ещё можно попробовать переносы строк экранировать

Новые блоги и статьи Все статьи Все блоги /
Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .

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

Решение

Решение

@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