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

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();">

Sin embargo, no parece funcionar correctamente. ¿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 cambian y debe generar un gráfico si ingresa valores.

Hay algunas formas de manejar eventos con HTML / DOM. No hay una forma correcta o incorrecta real, pero diferentes formas son útiles en diferentes situaciones.

1: Lo está definiendo en el HTML:

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

2: Hay que agregarlo 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 se adjunta una función al controlador 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);

Tanto el segundo como el tercer método permiten funciones en línea / anónimas y ambos deben declararse después de que el elemento se haya analizado del documento. El primer método no es válido XHTML porque el atributo onclick no está en la especificación XHTML.

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

Lo más probable es que el problema se encuentre en algún lugar de su CapacityChart()función. Después de visitar su enlace y ejecutar su script, se ejecuta la función CapacityChart () y se abren las dos ventanas emergentes (una se cierra según el script). Donde tienes 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 lo estaba escribiendo específicamente para IE. Como otros han mencionado, deberá reemplazar las referencias document.allcon document.getElementById. Sin embargo, aún tendrá la tarea de corregir el script después de esto, por lo que recomendaría que funcione al menos en IE primero, ya que cualquier error que cometa al cambiar el código para que funcione en varios navegadores 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.

Yo diría que sería mejor agregar el JavaScript de una manera discreta ...

si usa jQuery podría hacer algo como:

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

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

Su HTML y la forma en que llama a la función desde el botón se ven correctos.

El problema parece estar en la CapacityCountfunción. Recibo este error en mi consola en Firefox 3.5: "document.all is undefined" en la línea 759 de bendelcorp.js.

Editar:

Parece que document.alles una cosa solo de IE y es una forma no estándar de acceder al DOM. Si lo usa document.getElementById(), probablemente debería funcionar. Ejemplo: en document.getElementById("RUnits").valuelugar dedocument.all.Capacity.RUnits.value

Esto se ve correcto. Supongo que definiste tu función con un nombre diferente o en un contexto que no es visible para el botón. Por favor agregue un código

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

Entonces debería verse así: onclick="CapacityChart()"

entonces todo debería funcionar :)

Un problema importante que tiene es que está utilizando el rastreo del navegador 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, así navigator.appNameque no lo estaré Netscape. ¿Chrome es compatible?document.all ? Tal vez, pero de nuevo tal vez no. ¿Y qué hay de otros navegadores?

La versión del código en la Netscaperama debería funcionar en cualquier navegador desde Netscape Navigator 2 desde 1996, por lo que probablemente debería seguir con eso ... excepto que no funcionará (o no está garantizado que funcione) ) porque no ha especificado un nameatributo en los inputelementos, por lo que no se agregarán a la elementsmatriz del formulario como elementos con nombre:

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

Déles un nombre y use la elementsmatriz, o (mejor) use

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

que funcionará en todos los navegadores modernos, sin necesidad de ramificaciones. Solo para estar seguro, reemplace esa búsqueda de una versión de navegador mayor o igual a 4 con una verificación de getElementByIdsoporte:

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

Probablemente también desee validar su entrada; algo como

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

ayudaría.

Su código falla en esta línea:

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

Traté de pisarlo con Firebug y falla allí. eso debería ayudarte a resolver el problema.

tienes jquery referenciado. También podría usarlo en todas estas funciones. limpiará tu código significativamente.

Tengo un código de botón inteligente de función de devolución de llamada:

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

RESPUESTA SIMPLE:

   onclick="functionName(ID.value);

Donde ID es la ID del campo de entrada.

forma tonta:

onclick="javascript:CapacityChart();"

Debe leer sobre JavaScript discreto y utilizar un método de enlace de frameworks para vincular devoluciones de llamada a eventos dom.