Javascript afficher une variable.
gianb
-
gianb -
gianb -
Bonjour,
J'ai ce code me permettant de calculer la vitesse de coupe d'un outil
Hors je ne sais pas comment pouvoir afficher le résultat sur une page html.. J'ai ce code-ci :
Quelqu'un aurait une solution ?
J'ai ce code me permettant de calculer la vitesse de coupe d'un outil
function CuttingSpeed(){
var Dvar = parseInt(prompt('D'));
var FRvar = parseInt(prompt('FR'));
var CSvar = (3.15 * Dvar * FRvar) / 60
alert(CSvar + '% mètres / minutes');
alert(Dvar + '% millimètres');
alert(FRvar + '% tours / minutes');
Hors je ne sais pas comment pouvoir afficher le résultat sur une page html.. J'ai ce code-ci :
<script type="text/javascript" src="./CuttingSpeed.js"> </script>
<form method="POST">
<input id="FR"></input>
<input id="D"></input>
</form>
Quelqu'un aurait une solution ?
3 réponses
-
-
Salut,
De nombreuses erreurs dans votre approche et bien sûr le code est incomplet:
tout d'abord si vous utilisez un formulaire method="POST" cela signifie que les données du formulaire(les input) sont envoyées à une page externe(indiqué par l'attribut action="nomdelapage.php" celui ci étant manquant il n'y a pas d'envoi).
Vos balises input ne sont pas correctement remplies car il faut indiquer un type(ici texte par défaut mais autant éviter de telles erreurs+le respect des standards garantit la lisibilité dans les navigateurs et l'évolution du code pour les normes futures).
Ensuite pour valider un formulaire il faut utiliser un
<input type="submit" value="valider" /> ou bien un <button></button> qui aura le même comportement par défaut, la balise input n'est pas double mais (dite auto fermante.
Javascript étant un langage client il n'y a aucun intérêt d'envoyer les informations en externe et il peut récupérer ces valeurs sans avoir à valider cet envoi.
On utilisera pour ça le DOM et la programmation événementielle
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="./CuttingSpeed.js"></script> </head> <body> <form> <input type="text" id="fr" > <input type="text" id="d" > <!-- le formulaire n'étant pas un envoi à l'extérieur j'utilise <button></button> et en définissant type="button" enléve son comportement par défaut(à l'intérieur d'un form)qui sinon enverrais('submit')celui ci vers l'environnement indiqué par action=(ici non définit)--> <button type="button" onclick="CuttingSpeed()">Valider</button> <!--la programmation événementielle permet de détecter un événement 'déclencheur', ici la fonction lors du clic(onclick=)--> </form> </body> <div> <p id="resultat"> </p> <div> </html>
Maintenant nous allons utiliser le DOM plutôt que prompt qui vient des langages plus anciens (et procéduraux) il me semble, voici les modifications de la fonction:function CuttingSpeed(){ var Dvar = parseInt(document.getElementById('d')); /* document.getElementById() parcourt le DOM(arbre des éléments de la page(nb:le HTML majoritairement) pour récupérer de document(la page) la valeur de l'élément de l'id indiqué en paramètre */ var FRvar = parseInt(document.getElementById('fr')); var CSvar = (3.15 * Dvar * FRvar) / 60 // pour afficher le résultat on utilise la balise p d'id 'resultat' document.getElementById('resultat').innerHTML(CSvar); /* la fonction .innerHTML change le contenu de l'élément utilisé, source: http://www.w3schools.com/jsref/prop_html_innerhtml.asp */ /*console.log(CSvar + '% mètres / minutes'); console.log(Dvar + '% millimètres'); console.log(FRvar + '% tours / minutes');*/ return 0;/* pas indispensable mais utile en cas de besoin de contrôler la réussite de la fonction et indique/force la fin de l'exécution de la fonction quel que soit son statut*/ } /*-------------------------------------------------------- pour afficher la sortie "console.log(" javascript: dans le navigateur Menu/Options:->(Outils dans Chrome/développement dans firefox ou mieux utiliser firebug)->console javascript--------------------------------------------------------*/ -
