Utiliser un bouton HTML pour appeler une fonction JavaScript

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

Voici le code:

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

Cela ne semble cependant pas fonctionner correctement. Y a-t-il une meilleure manière de faire cela?

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

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 façon, mais différentes manières sont utiles dans différentes situations.

1: Il est défini dans le HTML:

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

2: Il est ajouté à la propriété DOM pour 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 attacher une fonction au gestionnaire d'événements 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 les deux doivent être déclarées après que l'élément a été analysé à partir du document. La première méthode n'est pas XHTML valide car l'attribut onclick n'est pas dans la spécification XHTML.

Les 1ère et 2e méthodes s'excluent mutuellement, ce qui signifie que l'utilisation de l'une (la 2e) prévaudra sur l'autre (la 1re). La 3ème méthode vous permettra d'attacher autant de fonctions que vous le souhaitez au même gestionnaire d'événements, même si la 1ère ou la 2ème méthode a également été utilisée.

Très probablement, 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 fenêtres contextuelles 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
Lorsque j'ai vu votre code, je pensais que vous l'écriviez spécifiquement pour IE. Comme d'autres l'ont mentionné, vous devrez remplacer les références à document.allpar document.getElementById. Cependant, vous aurez toujours la tâche de corriger le script après cela, donc je recommanderais de le faire fonctionner au moins dans IE d'abord, car toute erreur que vous commettez en changeant le code pour fonctionner entre les navigateurs pourrait causer encore plus de confusion. Une fois qu'il fonctionne dans IE, il sera plus facile de dire s'il fonctionne dans d'autres navigateurs pendant que vous mettez à jour le code.

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

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

Le problème semble être dans la CapacityCountfonction. Je reçois cette erreur dans ma console sur Firefox 3.5: "document.all is undefined" sur la ligne 759 de bendelcorp.js.

Éditer:

On dirait que document.allc'est une chose uniquement IE et est un moyen non standard d'accéder au DOM. Si vous utilisez document.getElementById(), cela devrait probablement fonctionner. Exemple: document.getElementById("RUnits").valueau lieu dedocument.all.Capacity.RUnits.value

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

Juste pour que vous le sachiez, le point-virgule ( ; ) n'est pas censé être là dans le bouton lorsque vous appelez la fonction.

Il devrait donc ressembler à ceci: onclick="CapacityChart()"

alors tout devrait fonctionner :)

Un problème majeur que vous avez est que vous utilisez le sniffing 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 ça navigator.appNamene le sera pas Netscape. Chrome est-il compatible document.all? Peut-être, mais encore une fois peut-être pas. Et les autres navigateurs?

La version du code sur la Netscapebranche devrait fonctionner sur n'importe quel navigateur dès le retour à Netscape Navigator 2 à partir de 1996, donc vous devriez probablement vous en tenir à cela ... sauf que cela ne fonctionnera pas (ou n'est pas garanti de fonctionner) ) car vous n'avez pas spécifié d' nameattribut sur les inputéléments, ils ne seront donc pas ajoutés au elementstableau du formulaire en tant qu'éléments nommés:

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

Soit leur donner un nom et utiliser le elementstableau, soit (mieux) utiliser

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

qui fonctionnera sur tous les navigateurs modernes - pas de branchement nécessaire. Juste pour être sûr, remplacez ce reniflement pour une version de navigateur supérieure ou égale à 4 par une vérification de getElementByIdprise en charge:

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

Vous souhaitez probablement également valider votre entrée; quelque chose comme

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

aiderait.

Votre code échoue sur cette ligne:

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

J'ai essayé de le faire avec Firebug et ça échoue. cela devrait vous aider à comprendre le problème.

vous avez référencé jquery. vous pourriez aussi bien l'utiliser dans toutes ces fonctions. cela nettoiera considérablement votre code.

J'ai un code de bouton de rappel de fonction intelligent:

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

RÉPONSE SIMPLE:

   onclick="functionName(ID.value);

Où ID est l'ID du champ de saisie.

façon stupide:

onclick="javascript:CapacityChart();"

Vous devriez lire sur le javascript discret et utiliser une méthode de liaison de frameworks pour lier les rappels aux événements dom.