Bonjour,

Je me lance dans le javascript et j'ai développé un convertisseur décimal, binaire, hexadécimal et octal. Tout va bien seulement je rencontre un problème, lorsque l'utilisateur convertit une valeur j'ai fais en sorte que le résultat s'affiche dans un input "readonly" mais le résultat s'affiche puis disparaît en une fraction de secondes.

Voici mon code :

Le javascript : 

function Convert(){
       var number = String(document.getElementById('number').value);
       console.log('Number : ' + number);
       var input = document.getElementsByTagName('input'),
            inputLength = input.length;

        for (var i = 0; i < inputLength; i++) {
            if (input[i].type === 'radio' && input[i].checked) {
                var value = input[i].value;
            }
        }
      value = Number(value);
      console.log(value);
       switch(value){
         case 1:
          var result = DecimalToBinary(number);
          break;
        case 2:
          var result = DecimalToHexadecimal(number);
          break;
        case 3:
          var result = DecimalToOctal(number);
          break;
        case 4:
          var result = BinaryToDecimal(number);
          break;
        case 5:
          var result = BinaryToHexadecimal(number);
          break;
        case 6:
          var result = BinaryToOctal(number);
          break;
        case 7:
          var result = HexadecimalToDecimal(number);
          break;
        case 8:
          var result = HexadecimalToBinary(number);
          break;
        case 9:
          var result = HexadecimalToOctal(number);
          break;
       }
      console.log(result);
      var resultInput = document.getElementById("result");
      resultInput.setAttribute('value', result);
    }

Au dessus il y a les fonctions de conversion et voila le HTML :

<div class="container">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <br/><br/><br/><br/>
          <form class="form-horizontal well" style="border: #212121 solid 2px;">
            <fieldset>
            <legend align="center">Convertisseur Décimal, Binaire, Héxadécimal et Octal </legend>
              <div class="form-group">
                <label class="col-md-4 control-label" for="number">Valeur à convertir</label>
                <div class="col-md-6">
                <input type="text" id="number" class="form-control input-md" required>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-4 control-label">Type de conversion</label>
                <div class="col-md-4">
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="1" checked="checked">
                    Décimal <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Binaire
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="2">
                    Décimal <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Hexadécimal
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="3">
                    Décimal <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Octal
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="4">
                    Binaire <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Décimal
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="5">
                    Binaire <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Hexadécimal
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="6">
                    Binaire <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Octal
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="7">
                    Hexadécimal <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Décimal
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="8">
                    Hexadécimal <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Binaire
                  </label>
              	</div>
                <div class="radio">
                  <label>
                    <input type="radio" name="convert" value="9">
                    Hexadécimal <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Octal
                  </label>
              	</div>
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-4 control-label" for=""></label>
                <div class="col-md-8">
                  <button onclick="javascript:Convert();" class="btn btn-success">Convertir</button>
                  <button type="reset" class="btn btn-danger">Vider</button>
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-4 control-label" for="number">Résultat</label>
                <div class="col-md-6">
                <input type="text" id="result" class="form-control input-md" readonly>
                </div>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>

Ps : j'utilise bootstrap 

Merci d'avance pour vos réponses car même en cherchant sur Google je n'ai pas trouvé de réponse précise ...

Cordialement, Jean.

Bonjour,

A la place de la ligne 44/45 tu peux mettre:

document.getElementById("result").value = result;

Pas sur que ca resolve ton problème...

Merci de ta réponse mais cela ne change rien ... la variable ne reste affichée qu'une fraction de secondes

Salut,

Ton code parait correct. N'y a-t-il pas un autre bout de code dans ta page qui provoquerait soit un refresh de ta page (et donc la suppression du contenu de ton input) ou simplement qui simulerait un click sur ton bouton "Vider" qui fait un reset du formulaire ?

Edit : Au temps pour moi, je n'avais pas vu. Il faut que tu définisses ton bouton "Convertir" comme ci-dessous :

<button onclick="javascript:Convert();" type="button" class="btn btn-success">Convertir</button>

En ne définissant pas le type, tu te retrouves à faire un submit du formulaire et donc il efface le contenu que tu as forcé par javascript.

Par ailleurs, fait attention, le bouton "Reset" n'affectera pas ton input en readonly. Il faudra donc que tu vides la valeur en javascript.

-
Edité par Deejayfool 29 août 2016 à 14:06:13

Bonjour,

Merci deejayfool , Merci infiniment !