Javascript afficher une variable.

Fermé
gianb - 28 sept. 2015 à 20:00
 gianb - 29 sept. 2015 à 14:48
Bonjour,

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 ?

A voir également:

3 réponses

Personne ?
0
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--------------------------------------------------------*/
0
Merci beaucoup pour cette réponse plus que complète !
0