Une fonction problématique

Sujet résolu

25 mai 2017 à 11:39:57

Bonjour, tout d'abord je suis tout nouveau sur ce site ainsi que dans l'apprentissage des différents langages html/CSS et js merci de votre compréhension

voila j'ai un projet pour convertir les unités dans le système métrique mais dans ma deuxième fonction, il y a probablement un truc qui cloche car dès que je l'ajoute, ma seconde liste déroulante part en vrille

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />
		
		<link rel="stylesheet" href="nouveau.css"/>
		
		<title> Convertisseur d'unités </title>


<SCRIPT language="JavaScript">



function Choix(form) {
i = form.Rubrique.selectedIndex;
if (i == 0) {
  for (i=0;i<5;i++) {
    form.Page.options[i].text="";
    }
  return;
  }
form.Page.selectedIndex = 0;
switch (i) {
case 1 : var txt = new Array ('millimètre','centimètre','décimètre','mètre'); break;
case 2 : var txt = new Array ('millimètre','centimètre','décimètre ','mètre'); break;
case 3 : var txt = new Array ('millimètre','centimètre','décimètre','mètre'); break;
case 4 : var txt = new Array ('millimètre','centimètre','decimètre','mètre'); break;
}
form.Page.options[0].text="--- Choisissez une page ---";
for (i=0;i<5;i++) {
  form.Page.options[i+1].text=txt[i];
  }
} 

function conversion(){


var value2 = document.getElementById('UC').value;

var nombre = document.getElementById("nombre").value;

var value1 = document.getElementById('US').value;

//valeurs tableau et unité


	switch(value1){

		case 1 : "nombre" * 1000 = var nbm ; break; // nouvelle valeur en mètres
		case 2 : "nombre" * 100 = var nbm ; break; 
		case 3 : "nombre" * 10 = var nbm ; break;
		case 4 : "nombre" = var nbm ; break; 
			}

	switch (value2){ //conversion des valeurs dans l'unité voulue
		case 1 : "nbm" * 0.001 = var résultat ; break;
		case 2 : "nbm" * 0.01 = var résultat ; break;
		case 3 : "nbm" * 0.1 = var résultat ; break;
		case 4 : "nbm" * 1 = var résultat ; break;

	}
alert(votre résultat est "résultat")



}
}	


</SCRIPT>




	</head>

	<body>

		<header>
			<h1 class="titre"> Le convertisseur d'unités </h1>
		</header>


		<p class="introduction" > Bonjour ! Soyez les bienvenus dans notre site. </br>
		 Veuillez selectionner une unité pour la convertir </p>
<form>
<TABLE>
<TR>
	<TH>Unité source&nbsp;:</TH>
	<TH>Unité cible&nbsp;:</TH>
</TR>
<TR> 
	<TD><SELECT NAME="Rubrique" onChange='Choix(this.form)' id='US'>
	   	<OPTION>--- Choisissez une unité ---</OPTION>
	   	<OPTION>millimètre</OPTION>
	   	<OPTION>centimètre</OPTION>
	   	<OPTION>décimètre</OPTION>
		<OPTION>mètre</OPTION>
		</SELECT></TD>
	<TD><SELECT NAME="Page" id='UC'>
	   	<OPTION>--- Choisissez une unité à convertir ---</OPTION>
		<OPTION></OPTION>
	   	<OPTION></OPTION>
	   	<OPTION></OPTION>
	   	<OPTION></OPTION>
		</SELECT></TD>
</TR>
</TABLE>
</form>

	<input type="number" id="nombre" /> //input de la valeur à convertir
	<button onclick ="conversion()"></button> // bouton pour lancer la normalisation des valeurs et l'afficher


	</body>


</html>

Voila,j’espère que vous pourrez m'aider, merci d'avance !

et désolé pour les sans doute nombreuses fautes commises dans ce code

Edit 1 :

Je me rend compte que maintenant que la phrase "part en vrille" est pas forcément très compréhensible,

en gros quand je rajoute la fonction conversion(), la deuxième liste déroulante qui se remplit normalement avec les différents array est totalement vide peut importe quelle unité de départ je sélectionne.

-
Edité par JulienMagne1 25 mai 2017 à 14:55:21

Anonyme

25 mai 2017 à 15:50:17

"nombre" = var nbm : On dit plutôt : var nbm = "nombre".

var résultat : Les lettres accentuées, c'est le mal... Même si elles passent en JS, il est de bien meilleur goût de coder en Anglais.

"nombre" * 10, "nbm" * 0.1 : Tout ce qui est entre les symboles " est considéré comme du texte par JS. Si tu veux accéder à la variable du même nom, tu dois les enlever...

-
Edité par Anonyme 25 mai 2017 à 15:50:41

JulienMagne1

25 mai 2017 à 17:33:41

Merci de ta réponse, j'ai effectué les changements que tu m'as indiqué mais le problème est toujours présent

Anonyme

25 mai 2017 à 17:54:22

Aucun message d'erreur dans la console du navigateur ( F12 ) ?

-
Edité par Anonyme 25 mai 2017 à 17:54:47

Gothrider

25 mai 2017 à 22:56:08

Novax a écrit:

"nombre" * 10, "nbm" * 0.1 : Tout ce qui est entre les symboles " est considéré comme du texte par JS. Si tu veux accéder à la variable du même nom, tu dois les enlever...

-
Edité par Novax il y a environ 7 heures

Bonjour,

Je penche plutôt à une conversion de type ... passer d'un string en nombre avec la fonction Number()

Ce ne serait pas mieux pour effectuer des calculs ??

L'apprentissage est le fruit de la connaissance

Anonyme

26 mai 2017 à 10:16:29

Number.parseFloat('nombre') ne donne pas accès à la variable nombre, si tel était ton souhait.

Par ailleurs, ce serait bien de poster la solution, maintenant que le sujet est résolu ; ça pourrait être utile à d'autres...

JulienMagne1

26 mai 2017 à 16:06:38

J'ai montré le code a quelqu'un qui s'y connait la dedans et m'a corrigé le problème, mais je n'ai pas encore eu accès au résultat final, je le poste sur le site dès que j'y ai accès, même si je ne pense pas que ce que je vais avoir ressemble a ce que j'ai posté tout en haut

Voila, merci et désolé (pour le dérangement) à ceux qui ont essayé de m'aider via ce forum.

EDIT:voila une version corrigée et qui fonctionne d'un convertisseur mètrique

<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8" />		
		<link rel="stylesheet" href="convertisseur.css"/>		
		<title> Convertisseur d'unités </title>
	</head>

	<body>
		<header>
			<h1 class="titre"> Le convertisseur d'unités </h1>
		</header>

		<p class="introduction" > Bonjour ! Soyez les bienvenus sur notre page. </br>
		 Veuillez selectionner une unité source, une unité cible ainsi qu'une valeur pour la convertir. 
		</p>
	<form>
		<TABLE ALIGN=center>
			<TR>
				<TH>Unité source&nbsp;:</TH>
				<TH>Unité cible&nbsp;:</TH>
			</TR>
			<TR> 
				<TD><SELECT NAME="Rubrique" onChange='Choix(this.form)' id='US'>      
					<OPTION>--- Choisissez l'unité source ---</OPTION>
					<OPTION>millimètre</OPTION>
					<OPTION>centimètre</OPTION>
					<OPTION>décimètre</OPTION>
					<OPTION>mètre</OPTION>
					</SELECT></TD>
				<TD><SELECT NAME="Page" id='UC'>
					<OPTION>--- Choisissez l'unité cible ---</OPTION>
					<OPTION></OPTION>
					<OPTION></OPTION>
					<OPTION></OPTION>
					</SELECT></TD>
			</TR>
			<TR>
				<TH COLSPAN=2>Valeur à convertir&nbsp;:</TH>
			</TR>
			<TR>
				<TD COLSPAN=2><input type="number" id="nombre" /></TD>
			</TR>
			<TR>
				<TD COLSPAN=2><button id="test" onClick="convertir()">Convertir</button></TD>
			</TR>
		</TABLE>
	</form>
	
		
	</body>

<SCRIPT language="JavaScript">
<!--
function Choix(form) 
{
	
	i = form.Rubrique.selectedIndex;
	if (i == 0) 
	{
		for (j=0;j<4;j++) 
		{
			form.Page.options[j].text="";
		}
		form.Page.options[0].text="--- Choisissez l'unité cible ---";
		return;
	}
	form.Page.selectedIndex = 0;
	switch (i) 				
	{
		case 1 : var txt = new Array ('centimètre','décimètre','mètre'); break;
		case 2 : var txt = new Array ('millimètre','décimètre ','mètre'); break;
		case 3 : var txt = new Array ('millimètre','centimètre','mètre'); break;
		case 4 : var txt = new Array ('millimètre','centimètre','decimètre'); break;
	}
	form.Page.options[0].text="--- Choisissez l'unité cible ---";
	for (i=0;i<4;i++) 
	{
		form.Page.options[i+1].text=txt[i];
	}
} 

function convertir()
{
	var value1 = document.getElementById('US').value;
	var value2 = document.getElementById('UC').value;
	var nombre = document.getElementById('nombre').value;
	if (nombre=="")
	{
		alert("Aucune valeur saisie !");
		return;
	}
	var nombreInit = nombre;
	
	/* Conversion du nombre en mètre (normalisation) */
	switch (value1)
	{
		case 'millimètre' : nombre = nombre * 0.001;break;
		case 'centimètre' : nombre = nombre * 0.01;break;
		case 'décimètre' : nombre = nombre * 0.1;break;
		case 'mètre' : /* rien à faire */;break;
	}
	/* Conversion du nombre normalisé vers la grandeur cible */
	switch (value2)
	{
		case 'millimètre' : nombre = nombre * 1000;break;
		case 'centimètre' : nombre = nombre * 100;break;
		case 'décimètre' : nombre = nombre * 10;break;
		case 'mètre' : /* rien à faire */;break;
	}

   alert(nombreInit + " " + value1 +"(s) = " + nombre +  " " + value2 + "(s)");

}
</SCRIPT>

</html>

-
Edité par JulienMagne1 29 mai 2017 à 22:52:49