Ma variable s'affiche puis disparait

Par OhhRaj, il y a 9 ans

Javascript

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); }

Et voila le formulaire

<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>

Je n'attends pas un code tout fait mais simplement une piste ( Je débute en js ), Merci d'avance !
OhhRaj.

7 réponses

OhhRaj, il y a 9 ans

Coupé la soumission ? Dois-je modifier mes attributs method et action ?

OhhRaj, il y a 9 ans

Merci de ta réponse mais je dois mettre ce code dans ma fonction Convert() ou je dois directement l'appeller lors de l'envoie du formulaire ?

OhhRaj, il y a 9 ans

Excuse moi de te déranger encore mais j'ai une erreur : Uncaught ReferenceError: $ is not defined ...

Kaelyscius, il y a 9 ans

C'est parce que tu n'utilise pas Jquery, ou que Jquery est appelé après le bout de code que t'a donnée grégory K.

essaye un truc dans le genre :
C'est du javascript natif.
Met un id sur ton bouton:

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

Puis dans ta partie où tu as du script javascript

document.getElementById("tonID").addEventListener("click", function(event){ event.preventDefault() });
OhhRaj, il y a 9 ans

Très bien j'ai inclus Jquery au début de ma page et je n'ai plus d'erreurs mais ma variable disparait toujours ... Est ce que cela ne serait pas plus simple de faire une action sur ma page de récup tout en php et de basculer en javascript ?

Kaelyscuis cela me met une erreur : Uncaught TypeError: Cannot read property 'addEventListener' of null

betaWeb, il y a 9 ans

@OhhRaj salut,

Tu devrais appeler ta fonction lors de la soumussion du formulaire, et non au clic sur le bouton de soumission :

HTML :

<form data-js="my-form" class="form-horizontal well" style="border: #212121 solid 2px;"> <!-- Ton formulaire ici --> </form>

JS :

document.querySelector('[data-js="my-form"]').submit(function (e) { e.preventDefault(); // Ton traitement ici return false; });

@Grégory K Ce n'est pas la peine d'ajouter une dépendance (jQuery en l'occurrence), l'action est assez simple pour se "contenter" de Javascript.

OhhRaj, il y a 9 ans

Très bien j'ai trouvé il fallait juste rajoute : type="button" sur mon bouton convertir ainsi le formulaire ne s'envoit pas :D
Merci à tous :D