Usando um botão HTML para chamar uma função JavaScript

Estou tentando usar um botão HTML para chamar uma função JavaScript.

Aqui está o código:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

Parece não funcionar corretamente. Existe uma maneira melhor de fazer isso?

Aqui está o link: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html, clique na guia de capacidade na seção inferior esquerda. O botão deve gerar um alerta se os valores não forem alterados e produzir um gráfico se você inserir valores.

Existem algumas maneiras de lidar com eventos com HTML / DOM. Não existe um caminho certo ou errado, mas modos diferentes são úteis em situações diferentes.

1: Existe uma definição no HTML:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2: Adicionamos à propriedade DOM do evento em Javascript:

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3: E há anexar uma função ao manipulador de eventos usando Javascript:

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

O segundo e o terceiro métodos permitem funções em linha / anônimas e ambos devem ser declarados após o elemento ter sido analisado no documento. O primeiro método não é XHTML válido porque o atributo onclick não está na especificação XHTML.

Os primeiro e segundo métodos são mutuamente exclusivos, ou seja, o uso de um (o segundo) substituirá o outro (o primeiro). O terceiro método permitirá que você anexe quantas funções desejar ao mesmo manipulador de eventos, mesmo que o primeiro ou o segundo método também tenham sido usados.

Muito provavelmente, o problema está em algum lugar da sua CapacityChart()função. Depois de visitar seu link e executar seu script, a função CapacityChart () é executada e os dois pop-ups são abertos (um é fechado conforme o script). Onde você tem a seguinte linha:

CapacityWindow.document.write(s);

Tente o seguinte:

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

EDITAR
Quando vi seu código, pensei que você estivesse escrevendo especificamente para o IE. Como outros já mencionaram, você precisará substituir as referências document.allpor document.getElementById. No entanto, você ainda terá a tarefa de corrigir o script depois disso, portanto, recomendo que ele funcione pelo menos no IE primeiro, pois qualquer erro cometido ao alterar o código para funcionar em vários navegadores pode causar ainda mais confusão. Quando estiver funcionando no IE, será mais fácil saber se ele está funcionando em outros navegadores enquanto você atualiza o código.

Eu diria que seria melhor adicionar o javascript de uma maneira não invasiva ...

se você estiver usando o jQuery, poderá fazer algo como:

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >

Seu HTML e a maneira como você chama a função no botão parecem corretos.

O problema parece estar na CapacityCountfunção. Estou recebendo esse erro no meu console no Firefox 3.5: "document.all is undefined" na linha 759 do bendelcorp.js.

Editar:

Parece que document.allé apenas uma coisa do IE e é uma maneira não padrão de acessar o DOM. Se você usar document.getElementById(), provavelmente deve funcionar. Exemplo: em document.getElementById("RUnits").valuevez dedocument.all.Capacity.RUnits.value

Parece correto. Eu acho que você definiu sua função com um nome diferente ou em um contexto que não é visível para o botão. Adicione algum código

Só para você saber, o ponto-e-vírgula ( ; ) não deveria estar lá no botão quando você chama a função.

Portanto, deve ficar assim: onclick="CapacityChart()"

então tudo deve funcionar :)

Um grande problema que você tem é que você está usando o sniffing do navegador sem um bom motivo:

if(navigator.appName == 'Netscape')
    {
      vesdiameter  = document.forms['Volume'].elements['VesDiameter'].value;
      // more stuff snipped
    }
    else
    {
      vesdiameter  = eval(document.all.Volume.VesDiameter.value);
      // more stuff snipped
    }

Estou no Chrome, então navigator.appNamenão Netscape. O Chrome suportadocument.all ? Talvez, mas talvez não. E quanto a outros navegadores?

A versão do código na Netscaperamificação deve funcionar em qualquer navegador desde o Netscape Navigator 2 de 1996, então você provavelmente deve continuar com isso ... exceto que não funcionará (ou não está garantido que funcione) ) porque você não especificou um nameatributo nos inputelementos, portanto eles não serão adicionados à elementsmatriz do formulário como elementos nomeados:

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

Dê a eles um nome e use a elementsmatriz ou (melhor) use

var vesdiameter = document.getElementById("VesDiameter").value;

que funcionará em todos os navegadores modernos - sem necessidade de ramificação. Para garantir a segurança, substitua esse farejador por uma versão do navegador maior ou igual a 4 por uma verificação de getElementByIdsuporte:

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
    // do stuff...
}

Você provavelmente deseja validar sua entrada também; algo como

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
    alert("Diameter should be numeric");
    return;
}

ajudaria.

Seu código está falhando nesta linha:

var RUnits = Math.abs(document.all.Capacity.RUnits.value);

Eu tentei pisar embora com firebug e falha lá. isso deve ajudá-lo a descobrir o problema.

você referenciou jquery. você também pode usá-lo em todas essas funções. isso limpará seu código significativamente.

Eu tenho um código de botão inteligente para chamada de função:

<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>

RESPOSTA SIMPLES:

   onclick="functionName(ID.value);

Onde ID é o ID do campo de entrada.

maneira boba:

onclick="javascript:CapacityChart();"

Você deve ler sobre javascript discreto e usar um método de ligação de estruturas para vincular retornos de chamada a eventos dom.