Javascript-форум - Повесить событие на кнопку, не меняя кода кнопки

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Повесить событие на кнопку, не меняя кода кнопки (https://javascript.ru/forum/misc/33115-povesit-sobytie-na-knopku-ne-menyaya-koda-knopki.html)

Повесить событие на кнопку, не меняя кода кнопки

Я не очень хорошо разбираюсь в JS, так что возможно вопрос из области капитанства

Представим что у нас есть страница с каким-нибудь хтмл кодом.
На странице есть кнопка с айдишником button1
Нужно по клику на кнопку совершать какое-нибудь действие
Вопрос: как это прописать скриптом не в коде самой кнопки onclick="", а в шапке например, перед тегом body?

И второй вопрос
Если наша страница - это карточка товара, а в событие по клику на кнопку "отправить в корзину" нужно запихивать название товара (оно в каком нибудь конкретном теге прописано, h1 например). Как в этом случае в событие, которое совершается по клику, подсунуть название товара?

1) В head поместить скрипт:

<script>
document.getElementById('button1').onclick = function()
{
alert('Нажата кнопка');
}
</script>

2) тегу в котором записано название (например h1) присвоить id

<h1 id="product_name">Товар1</h1>

и дальше при вызове функции написать

<input type="button" name="button" onclick="func(document.getElementById('product_name').innerHTML)">

а функция будет выглядеть так:

function fucn(product)
{
alert(product); //выведет Товар1
}

<html><head>
</head><body>

<button id="mybutton">кнопка</button>
<script language="javascript"><!--	
	document.getElementById('mybutton').onclick = function() {
		alert('Клик')
	}
//--></script>	

</body></html>

Цитата:

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

1) В head поместить скрипт:
1 <script>
2 document.getElementById('button1').onclick = function()
3 {
4 alert('Нажата кнопка');
5 }
6 </script>

Садись, двойка. твой код выдаст ошибку. элемент на какой ты вешаешь обработчик ещё не существует.

2FoxTrix - А вы проверьте сами ) Будет ли работать ваш совет ;)

У меня ощущение, что ваш скрипт надо помещать ниже кнопки ))) Т. е. не в head а в body

document.body.onload = function(){
document.getElementById('button1').onclick = function(){
alert('CLICK');
}}

dmitriymar, cyberblade,
ок, не прав, не проверил, спать хотел =)

Ruslan_xDD,
тогда уж

<script>
window.onload = function()
{
	document.getElementById('button1').onclick = function()
	{
		alert('Нажата кнопка');
	}
}
</script>

т.к. document.body.onload = function(){} у меня тоже не работает

2Ruslan_xDD - не покатит, скрипт будет выполняться первый раз без контроля пользователя... По событию онлоад ) Можно придумать костыль в виде переменной которую плюсовать, если принципиально надо скрипт поместить в хеад и использовать именно это решение )

З. Ы. не знаю на счет того сработает ли document.body.onload = function()... Но тупо <body onload="myfunc();"> точно сработает. Хотя особо разницы с первого взгляда и нет...

Да способов можно много придумать :)

function loadbtn(){
document.getElementById('button1').onclick = function(){
alert('CLICK');
}}

и вставить loadbtn() в самый конец body.