Utiliser un bouton HTML pour appeler une fonction JavaScript

Question

J'essaie d'utiliser un bouton HTML pour appeler une fonction JavaScript.

Voici le code :

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

Mais il ne semble pas fonctionner correctement. Existe-t-il une meilleure façon de procéder ?

Voici le lien : http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html cliquez sur l'onglet capacité dans la section inférieure gauche. Le bouton devrait générer une alerte si les valeurs ne sont pas modifiées et devrait produire un graphique si vous entrez des valeurs.

Answer 1

Il existe plusieurs façons de gérer les événements avec HTML/DOM. Il n'y a pas vraiment de bonne ou de mauvaise méthode, mais différentes méthodes sont utiles dans différentes situations.

1 : Il y a une définition dans le HTML :

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

2 : Il faut l'ajouter à la propriété DOM de l'événement en Javascript :

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

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

3 : Et il y a l'attachement d'une fonction au gestionnaire d'événement en utilisant Javascript :

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

Les deuxième et troisième méthodes autorisent les fonctions inline/anonymes et doivent toutes deux être déclarées après l'analyse syntaxique de l'élément dans le document. La première méthode n'est pas un XHTML valide car l'attribut onclick ne fait pas partie de la spécification XHTML.

La première et la deuxième méthode s'excluent mutuellement, ce qui signifie que l'utilisation de l'une (la deuxième) annule l'autre (la première). La troisième méthode vous permet d'attacher autant de fonctions que vous le souhaitez au même gestionnaire d'événement, même si la première ou la deuxième méthode a également été utilisée.

Le plus probable est que le problème se situe quelque part dans votre CapacityChart() fonction. Après avoir visité votre lien et exécuté votre script, la fonction CapacityChart() s'exécute et les deux popups sont ouvertes (une est fermée selon le script). Où vous avez la ligne suivante :

CapacityWindow.document.write(s);

Essayez plutôt ce qui suit :

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

EDIT
Quand j'ai vu votre code, j'ai pensé que vous l'aviez écrit spécifiquement pour IE. Comme d'autres l'ont mentionné, vous devrez remplacer les références à document.all avec document.getElementById . Cependant, vous aurez toujours la tâche de corriger le script après cela, donc je recommanderais de le faire fonctionner dans au moins IE d'abord, car toute erreur que vous faites en changeant le code pour fonctionner sur plusieurs navigateurs pourrait causer encore plus de confusion. Une fois que cela fonctionne dans IE, il sera plus facile de dire si cela fonctionne dans d'autres navigateurs pendant que vous mettez à jour le code.

Answer 2

Je dirais qu'il serait préférable d'ajouter le javascript de manière discrète...

si vous utilisez jQuery, vous pourriez faire quelque chose comme :

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

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

Answer 3

Votre HTML et la façon dont vous appelez la fonction à partir du bouton semblent corrects.

Le problème semble se situer au niveau de la CapacityCount fonction. J'obtiens cette erreur dans ma console sous Firefox 3.5 : "document.all is undefined" à la ligne 759 de bendelcorp.js.

Edit :

On dirait que document.all est réservé à IE et constitue un moyen non standard d'accéder au DOM. Si vous utilisez document.getElementById() cela devrait probablement fonctionner. Exemple : document.getElementById("RUnits").value au lieu de document.all.Capacity.RUnits.value

Answer 4

Cela semble correct. Je suppose que vous avez défini votre fonction avec un nom différent ou dans un contexte qui n'est pas visible pour le bouton. Veuillez ajouter du code

Answer 5

L'un de vos principaux problèmes est que vous utilisez le reniflage du navigateur sans raison valable :

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
    }

Je suis sur Chrome, donc navigator.appName ne sera pas Netscape . Est-ce que Chrome prend en charge document.all ? Peut-être, mais peut-être pas. Et qu'en est-il des autres navigateurs ?

La version du code sur le Netscape devrait fonctionner sur n'importe quel navigateur jusqu'à Netscape Navigator 2 de 1996, donc vous devriez probablement vous en tenir à cela... sauf que cela ne fonctionnera pas (ou n'est pas garanti de fonctionner) parce que vous n'avez pas spécifié un fichier name de l'attribut input de sorte qu'ils ne seront pas ajoutés à l'élément elements comme éléments nommés :

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

Soit vous leur donnez un nom et vous utilisez la fonction elements ou (mieux) utiliser

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

qui fonctionnera sur tous les navigateurs modernes - pas de branchement nécessaire. Par précaution, remplacez la recherche d'une version de navigateur supérieure ou égale à 4 par la recherche de getElementById soutien :

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

Vous voulez probablement valider votre entrée aussi bien ; quelque chose comme

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

aiderait.