Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   повесить событие на кнопку (https://javascript.ru/forum/events/18552-povesit-sobytie-na-knopku.html)

Leax 06.07.2011 13:02

повесить событие на кнопку
 
// добавляем кнопку
var btndiv = document.createElement("div");
var btn = document.createElement('input');
btndiv.id = 'divBtn'; 
btn.type = 'button';
btn.value = 'Go!' ;
btn.onclick = "alert('Test')"; // Не появляется в коде HTML!!!
btndiv.appendChild(btn);
document.body.appendChild(btndiv);

1) не работает событие на добавляемой кнопке (даже в HTML не появляется)
2) не получается добавить кнопку в другое место документа:
tb1=document.getElementsByClassName('br_ser');
tb1.appendChild(btn); // Ошибка!

Ошибка: tb1.appendChild is not a function

Помогите, пожалуйста (

ksa 06.07.2011 13:07

Не правильно ты, дядя Фёдор, бутерброд ешь...

<body>
<script>
// добавляем кнопку
var btndiv = document.createElement("div");
var btn = document.createElement('input');
btndiv.id = 'divBtn'; 
btn.type = 'button';
btn.value = 'Go!' ;
btn.onclick = function(){alert('Test')};
btndiv.appendChild(btn);
document.body.appendChild(btndiv);
</script>
</body>

ksa 06.07.2011 13:11

Цитата:

Сообщение от Leax
2) не получается добавить кнопку в другое место документа:
tb1=document.getElementsByClassName('br_ser');tb1.appendChild(btn); // Ошибка!

Потому как
document.getElementsByClassName('br_ser')

возвращает коллекцию элементов, а у коллекции/массива нет метода appendChild()...

Leax 06.07.2011 13:18

Спасибо, но в строке
btn.onclick = function(){alert('Test')};


появляется ошибка:
Ошибка: Component is not available

Странно, а здесь на странице пример работает. %
Я код использую в GreaseMonkey

ksa 06.07.2011 13:20

Цитата:

Сообщение от Leax
о в строке
btn.onclick = function(){alert('Test')};


появляется ошибка:
Ошибка: Component is not available

В каком браузере?
Я смотрел в ИЕ7 и Опере...

ksa 06.07.2011 13:22

Посмотрел еще в ФФ и Хроме - всё работает без ошибок...

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<script>
// добавляем кнопку
var btndiv = document.createElement("div");
var btn = document.createElement('input');
btndiv.id = 'divBtn'; 
btn.type = 'button';
btn.value = 'Go!' ;
btn.onclick = function(){alert('Test')};
btndiv.appendChild(btn);
document.body.appendChild(btndiv);
</script>
</body>
</html>

Leax 06.07.2011 13:35

FF 3.6.16, Greasemonkey 0.9.6
var btndiv = document.createElement("div");
var btn = document.createElement('input');
btndiv.id = 'divBtn'; 
btn.type = 'button';
btn.value = 'Go!' ;
btn.onclick = function() {alert('Test')}; // ругается на эту строку
btndiv.appendChild(btn);
document.body.appendChild(btndiv);

вставил сразу после заголовка скрипта.
Если вышеуказанную строку закомментировать, то кнопка появляется.
Если строка без комментов - ошибка: Component is not available

Самое интересное, что ваш пример на этой странице работает нормально.

Щас с ума сойду ((

Leax 06.07.2011 13:39

btn.onclick = "alert('Test')";

а так ошибок не выдает, кнопка появляется, но onClick на ней в коде отсутствует

Leax 06.07.2011 13:47

Даже так ошибка появляется та же самая
btn.onclick = function() {};

Leax 06.07.2011 13:52

Вобщем не у одного меня такой глюк с Greasemonkey и button.onclick (
В инете нашел простое решение:
btn.setAttribute("onclick", "alert('Test!')");


Заработало!

Leax 06.07.2011 14:14

Теперь новая проблема:
на кнопку повесил вызов своей функции
btn.setAttribute("onclick", "buildText()");


но при нажатии на эту кнопку появляется ошибка:
buildText is not defined

Он в принципе понятно почему - эта функция осталась в скрипте Greasemonkey, а в коде Html её нет.

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

trikadin 06.07.2011 14:32

Чтобы не париться с кавычками - используй addEventListener, может, он глючить не будет. Плюс можно назначить достаточно сложный обработчик.

Андрей38 06.07.2011 14:43

..Простите,не нашел тему.Пишу поэтому сюда.
Сможете ли подсказать,уважаемые гуру,как очищать и удалять перемеенные var от их содержимого ,а также, где можно покопаться и УВИДЕТЬ их содержимое без вызова алерта т.е. где он сидит?

Leax 06.07.2011 14:49

Цитата:

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

Посмотрел, спасибо. Но проблема-то всё-равно осталась: GreaseMonkey отрабатывает, добавляет новую кнопку. А нужно еще добавить на страницу код большой функции-обработчика. Если бы я редактировал свой код html - было бы просто - скопировал+вставил между тегами script. Но такой возможности нет: мне нужно в код html добавить код своей большой функции с помощью GreaseMonkey.
Вот и думаю как бы это сделать

ksa 06.07.2011 15:59

Цитата:

Сообщение от Андрей38
как очищать и удалять перемеенные var от их содержимого

Из функции вышел их и нестало...

Цитата:

Сообщение от Андрей38
где можно покопаться и УВИДЕТЬ их содержимое без вызова алерта т.е. где он сидит?

Т.е. в оперативке как их найти?

А вывести еще в лог можно...
http://habrahabr.ru/blogs/javascript/114483/

trikadin 06.07.2011 16:23

Цитата:

Сообщение от Leax
нужно еще добавить на страницу код большой функции-обработчика

my_button.addEventListener('click', function(){...code...}, false);

И не нужно добавлять на страницу ф-цию... Просто сделайте её в обработчике.

Андрей38 11.07.2011 10:34

Цитата:

Сообщение от ksa (Сообщение 112046)
Из функции вышел их и нестало...


Т.е. в оперативке как их найти?

А вывести еще в лог можно...
http://habrahabr.ru/blogs/javascript/114483/

KSA ! ПРЕОГРОМНЕЙШЕЕ СПАСИБО ВАМ :thanks: ! ИСЧЕРПЫВАЮЩИЙ ОТВЕТ,УВАЖАЕМЫЙ ГУРУ! ИЗВИНИТЕ,ЧТО Я ТОЛЬКО СЕЙЧАС ЗАШЕЛ НА ФОРУМ ,чтоб посмотреть не отвитил ли мне кто нибудь :cray:
..
Еще раз,СПАСИБО ОГРОМНОЕ :thanks: !

Yaroma11 08.05.2014 11:37

Цитата:

Сообщение от ksa (Сообщение 112011)
Потому как
document.getElementsByClassName('br_ser')

возвращает коллекцию элементов, а у коллекции/массива нет метода appendChild()...

А как это обойти?


Часовой пояс GMT +3, время: 09:24.