Ao criar páginas, às vezes é necessário que ao clicar no botão colocado na página, algum evento programado pelo autor ocorra no navegador. Para fazer isso, você precisa colocar o código JavaScript no documento gerado e vinculá-lo ao botão necessário. Dependendo da quantidade de código necessária para implementar o evento pretendido, você pode usar diferentes maneiras de conectar o botão ao código.
Instruções
Passo 1
Na maioria das vezes, as chamadas de código JavaScript são vinculadas ao evento onclick, ou seja, ao clique com o botão esquerdo do mouse. Se você não precisa de muito código para descrever a ação que precisa acontecer, então tudo pode ser colocado diretamente na tag do botão. Por exemplo, para programar o navegador para mostrar uma mensagem simples quando um botão é clicado, o script JavaScript ficaria assim: alert ('Código funcionou!') Leva apenas uma instrução e texto. Tudo isso pode ser facilmente colocado na descrição do evento onclick da tag do botão. Nesse caso, o código HTML mais simples da página pode ter a seguinte aparência:
Botão com código
Botão com código
Passo 2
Não é prático colocar um código JavaScript mais complexo diretamente na tag do botão. É mais fácil fazer dele uma função separada e colocar sua chamada no evento onclick. Por exemplo, pode parecer uma função que mostra uma janela contendo a hora de um clique de botão: function getTime () {
var agora = nova data ();
alert ("O código funcionou em" + now.getHours () + ":" + now.getMinutes ());
} Deve ser colocado no cabeçalho da página (entre as tags e). O código completo da página com uma chamada para esta função associada ao botão pode ser assim:
Botão de chamada de função
function getTime () {
var agora = nova data ();
alert ("O código funcionou em" + now.getHours () + ":" + now.getMinutes ());
}
Botão de chamada de função
etapa 3
O mesmo método deve ser usado ao clicar em vários botões diferentes para gerar um evento que pode ser descrito com o mesmo código JavaScript. Por exemplo, você pode modificar ligeiramente a função anterior para adicionar a identificação do botão pressionado à caixa de mensagem: function getTime (btnString) {
var agora = nova data ();
alert (btnString + "clicado em" + now.getHours () + ":" + now.getMinutes ());
} O código completo para uma página com três desses botões pode ter a seguinte aparência:
Três botões com uma chamada de função
function getTime (btnString) {
var agora = nova data ();
alert (btnString + "clicado em" + now.getHours () + ":" + now.getMinutes ());
}
Primeiro botão
Segundo botão
Terceiro botão
