[Résolu] [JS] Besoin d’aide sur réalisation d’un convertisseur dec/hex

Marsh Posté le 22-08-2020 à 22:43:29

Bonjour à toutes et tous,

Tout d'abord je tiens à préciser que je ne connais pas vraiment JavaScript, je me suis lancé dans un projet pour faciliter une procédure que j'ai à mon travail et pour apprentissage perso également, mais de formation système et réseau, je fais du script sous Linux, automatise avec Ansible, donc, normalement, je peux me débrouiller.

Je m’explique :

Il arrive que dans le cadre de mon travail j’ai à convertir du décimal en hexadécimal pour obtenir un long code qui se présente, par exemple, sous cette forme (avec les espaces) : 29602 84af2 c9e22

29602 est un code hexadécimal toujours présent qui ne change jamais.

84af2 et c9e22 ont été obtenus après conversion décimal/hexadécimal

Pour ce faire j’utilise la calculatrice Windows en mode programmeur, mais aimerais coder un programme JavaScript avec formulaire HTML dans lequel je rentre les deux codes décimal et il me ressort le code long complet, voici un exemple :

Où j'en suis : c'est pas mal parti ! J'ai mon formulaire HTML (image ci-dessus), quand je rentre des chiffres dans les text input code 1 ou code 2 et que je clique sur les boutons OK cela convertit bien en hexadécimal dans le text input code long, super. Effacer fonctionne aussi, mais là rien de compliqué.

Voici ce sur quoi je bute :

Problème 1 : quand je convertis cela efface le chiffre précédemment converti, ors comme expliqué il me faudrait tous les chiffres (si c'est possible évidemment) dans l'unique text input code long. J'ai cherché sur sur le net, mais je bloque.

Problème 2: comment faire en sorte également que le code 29602 apparaisse à chaque conversion ?

code source :

HTML :

Code :

<form name="converthexa" action="">
<fieldset>
<legend>Titre</legend>
<p><label for="code_1">code 1 : </label> <input type="text" id="code_1" name="code_1" >
<input type="button" class="ok" name="valider" value="OK" onClick="xdecimal_code_1();"></p>
<p><label for="code_2">code 2 : </label> <input type="text" id="code_2" name="code_2" >
<input type="button" class="ok" name="valider" value="OK" onClick="xdecimal_code_2();"></p>
<p><label for="location">code long : </label><input type="text" id="location" name="location" >
<input type="reset" value="Effacer"></p>
</fieldset>
</form>

JavaScript

Code :

<script type="text/javascript">
function xdecimal_code_1()
{
decimal = document.getElementById("code_1" );
hexadecimal = document.getElementById("location" );
hexadecimal.value = (decimal.value-0).toString(16);
}
function xdecimal_code_2()
{
decimal = document.getElementById("code_2" );
hexadecimal = document.getElementById("location" );
hexadecimal.value = (decimal.value-0).toString(16);
}
</script>

Merci pour votre aide

Message édité par dj ess le 25-08-2020 à 10:55:36

Reply

Marsh Posté le 22-08-2020 à 22:43:29

Reply

Marsh Posté le 23-08-2020 à 11:38:46

Bonjour,
quelques remarques et questions :
- Dans ton programme, le seul intérêt du formulaire c'est d'automatiser l'action du bouton reset, ce qui est déjà pas mal. Mais on pourrait s'en passer s'il n'y a pas besoin de traiter d'avantage les données.
- Est-ce que les deux boutons OK sont nécessaires : pourquoi ne pas associer une seule fonction à un bouton qui traitera les deux codes ?

Voici un exemple avec quelques aménagements de ton code:

Code :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form name="converthexa" action="">
<fieldset>
<legend>Titre</legend>
<p><label for="code_1">code 1 : </label> <input type="number" id="code_1" name="code_1" ></p>
<p><label for="code_2">code 2 : </label> <input type="number" id="code_2" name="code_2" ></p>
<input type="button" class="ok" name="valider" value="Convertir" onClick="xdecimal();"></p>
<p><label for="location">code long : </label><input type="text" value="29602" id="location" name="location" readonly="readonly">
<input type="reset" value="Effacer"></p>
</fieldset>
</form>
<script type="text/javascript">
var hexadecimal = document.getElementById("location" );
// une fonction unique de conversion et d'affichage dans "location"
function xdecimal() {
code_1 = document.getElementById("code_1" );
code_2 = document.getElementById("code_2" );
hexadecimal.value ="29602 " +(code_1.value-0).toString(16) +" " +(code_2.value-0).toString(16);
}
</script>
</body>
</html>

Si tu dois garder les 2 boutons OK, tu pourrais écrire une seule fonction xdecimal à laquelle passer comme paramètre l'id ou la valeur du bouton à traiter

Reply

Marsh Posté le 25-08-2020 à 10:49:18

Bonjour,

Un grand merci Itela pour ton aide.

J’ai deux remarques :

1: tu es le meilleur

2: tu es le meilleur

C’est exactement ce que je voulais.

j’avais essayé avec un seul bouton, mais ça ne voulait pas fonctionner, donc j'avais fait avec deux.

Encore merci

Bonne journée

Message édité par dj ess le 25-08-2020 à 10:54:11

Reply

Marsh Posté le 25-08-2020 à 18:34:58

de rien !
Je suis comme toi : j'apprends en faisant..
Tu trouveras bien des petites choses à améliorer... par exemple utilisation de Number() ou parseInt() au lieu de (code_1.value-0) pour traiter les nombres.

Bonne continuation.

Reply

Marsh Posté le 29-08-2020 à 19:14:35

Hello :

Convertisseur terminé, après travail esthétique avec CSS, ça donne ça :

C'est pas mal je suis content !

Merci encore pour ton aide, a plus bon weekend.

Reply

Marsh Posté le 29-08-2020 à 20:32:54

Joli rendu !
Il reste un petit détail "code 1" qui apparait 2 fois placeholder de la deuxième zone).

Bon weekend
:hello:

Reply

Marsh Posté le 26-09-2020 à 13:25:28

Bonjour,

Merci oui c'est sympa, désolé du retard de ma réponse, oui j'avais vue pour code 1 code 1 mais les images étaient déjà hébergées.

Tout est ok aujourd'hui, j'ai légèrement agrandi le formulaire, car il faisait petit au milieu de la page.

Bon weekend

Reply

[Résolu] [JS] Besoin d’aide sur réalisation d’un convertisseur dec/hex

Sujets relatifs:

Leave a Replay