Usando un botón HTML para llamar a una función de JavaScript

Question

Estoy tratando de usar un botón HTML para llamar a una función de JavaScript.

Aquí está el código:

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

No parece funcionar correctamente sin embargo. ¿Hay una mejor manera de hacer esto?

Aquí está el enlace: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html haga clic en la pestaña de capacidad en la sección inferior izquierda. El botón debe generar una alerta si los valores no se cambian y debe generar un gráfico si ingresa valores.

Answer 1

Hay algunas maneras de manejar eventos con HTML/DOM. No existe un camino real o incorrecto, pero diferentes formas son útiles en diferentes situaciones.

1: No ha definirla en el código HTML:

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

2: Hay añadiéndolo a la propiedad DOM para el evento en Javascript:

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

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

3: Y no ha adjuntando una función de el controlador de eventos que utiliza Javascript:

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

Tanto el segundo como el tercer método permiten inline/anonymou s funciones y ambas deben declararse después de que el elemento se haya analizado desde el documento. El primer método no es XHTML válido porque el atributo onclick no está en la especificación XHTML.

Los métodos 1º y 2º son mutuamente excluyentes, lo que significa que usar uno (el 2º) anulará el otro (el 1er). El tercer método le permitirá adjuntar tantas funciones como desee al mismo controlador de eventos, incluso si también se ha utilizado el primer o el segundo método.

Lo más probable es que el problema se encuentre en algún lugar de la función CapacityChart(). Después de visitar su enlace y ejecutar su secuencia de comandos, se ejecuta la función CapacityChart() y se abren las dos ventanas emergentes (una se cierra según el script).Donde se tiene la siguiente línea:

CapacityWindow.document.write(s); 

Pruebe lo siguiente en su lugar:

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

EDITAR
Cuando vi su código pensé que estabas escribiendo específicamente para IE. Como han mencionado otros, deberá reemplazar las referencias a document.all con document.getElementById. Sin embargo, aún tendrá la tarea de corregir el script después de esto, por lo que le recomendaría que funcione al menos en IE primero, ya que cualquier error que cometa al cambiar el código para funcionar en el navegador cruzado podría causar aún más confusión. Una vez que esté funcionando en IE, será más fácil saber si está funcionando en otros navegadores mientras actualiza el código.

Answer 2

manera tonta:

onclick="javascript:CapacityChart();" 

Debe leer sobre Javascript discreta, y utilizar un método de marcos se unen para unirse devoluciones de llamada de eventos DOM.

Answer 3

diría que sería mejor añadir el código JavaScript de una manera no intrusiva ...

si se utiliza jQuery que podría hacer algo como:

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

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

Answer 4

Esto parece correcta. Supongo que definiste tu función con un nombre diferente o en un contexto que no es visible para el botón. Agregue un código

Answer 5

Un gran problema que tiene es que está utilizando el navegador olfateando sin una buena razón:

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 
    } 

estoy en Chrome, por lo que no habrá navigator.appNameNetscape. ¿Chrome es compatible con document.all? Quizás, pero de nuevo quizás no. ¿Y qué hay de otros navegadores?

La versión del código en la rama Netscape debería funcionar en cualquier navegador justo en el camino de regreso a Netscape Navigator 2 desde 1996, por lo que probablemente debería quedarse con eso ... excepto que no funcionará (o no 't garantizado para trabajar) porque no se ha especificado un atributo nameinput sobre los elementos, por lo que no se añadirán a la matriz de la forma elements como elementos nombrados:

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

Cualquiera de darles un nombre y su uso la elements matriz, o (mejor) utilizar

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

que funcionará en todos los navegadores modernos; no es necesario realizar ninguna bifurcación. Sólo para estar en el lado seguro, reemplazar ese olfateando para una versión del navegador mayor o igual a 4 con un cheque por getElementById apoyo:

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

Es posible que desee validar su entrada, así; algo así como

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

ayudaría.

Answer 6

Tu HTML y la forma en que llamas a la función desde el botón parecen correctos.

Parece que el problema está en la función CapacityCount. Recibo este error en mi consola en Firefox 3.5: "document.all no está definido" en la línea 759 de bendelcorp.js.

Editar:

Parece que document.all es un IE-único y es una forma estándar de acceder al DOM. Si usa document.getElementById(), probablemente debería funcionar.Ejemplo: en lugar de document.getElementById("RUnits").valuedocument.all.Capacity.RUnits.value

Answer 7

Su código está fallando en esta línea:

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

Traté de entrar a pesar de que con el quemador, y la falla allí. eso debería ayudarte a resolver el problema.

tiene referencia de jquery. también podría usarlo en todas estas funciones. limpiará su código de manera significativa.

Answer 8

Para que lo sepas, no se supone que el punto y coma (;) esté allí en el botón cuando llamas a la función.

Por lo tanto, sólo debe tener este aspecto: onclick="CapacityChart()"

entonces todo debería funcionar :)

Answer 9

Tengo un código inteligente botón de función-call-respaldo:

<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>