Sujet Précédent Sujet Suivant

Decimal vers hexadecimal javascript

Fermé
momo9213 - 6 mai 2022 à 22:24
 momo9213 - 7 mai 2022 à 01:14
bonjour je crée un site qui permet de mélange des couleurs mais je suis bloque au moment de faire passe les valeurs décimal vers l'héxadecimale merci pour ceux et celle qui essayeront de m aider (je mets qu'une partie du code pour ne pas encombre le message)
document.body.style.backgroundColor = "rgb(164,191,209)";
let valeur_rouge = 0;
let zoneRouge = document.getElementById("chiffre_rouge");

function fct_saisie_valeur_rouge(){
  if (isNaN(saisie_rouge.value)) {
      alert("Veuillez ecrire un nombre");
   } else {
       valeur_rouge = parseInt(saisie_rouge.value,10);
       zoneRouge.innerHTML = valeur_rouge;
       fct_change_couleur();
   }
   if (valeur_rouge > 255){
    alert("vous ne pouvez que entrer des nombre de 0 à 255");
    valeur_rouge = 255 ;
    zoneRouge.innerHTML = valeur_rouge;
   }
   if (valeur_rouge < 0){
    alert("vous ne pouvez que entrer des nombre de 0 à 255");
    valeur_rouge = 0 ;
    zoneRouge.innerHTML = valeur_rouge;
   }
}
let saisie_rouge = document.getElementById("text_rouge");
saisie_rouge.addEventListener("change",rouge);



function augmentation_rouge(){
    valeur_rouge = valeur_rouge + 1;
    zoneRouge.innerHTML = valeur_rouge;
    if (valeur_rouge > 255){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_rouge = 255 ;
    }
     zoneRouge.innerHTML = valeur_rouge;
    fct_change_couleur();
  }
 let bouton_rouge_plus = document.getElementById("rouge+");
 bouton_rouge_plus.addEventListener("click",augmentation_rouge);

 
 function diminution_rouge(){
    valeur_rouge = valeur_rouge - 1;
    zoneRouge.innerHTML = valeur_rouge;
    if (valeur_rouge < 0){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_rouge = 0 ;
    }
     zoneRouge.innerHTML = valeur_rouge;
    fct_change_couleur();
  }
 let bouton_rouge_moins = document.getElementById("rouge-");
 bouton_rouge_moins.addEventListener("click",diminution_rouge);
let boite_coloree = document.getElementById("boite_couleur")


function fct_change_couleur(){
    debutRVB = "rgb(" ;
 codeRVB = debutRVB.concat(valeur_rouge,",0",",0)");
 boite_coloree.style.backgroundColor = codeRVB;
}



function change_hexa(){
    let valeur_Decimale_rouge = zoneRouge.innerHTML;
    let valeur_Hexa_Decimale = document.getElementById("valeur");   
    valeur_Hexa_Decimale.innerHTML.value = valeur_Decimale_rouge.toString(16);
}
   valeur_Hexa_Decimale.addEventListener("change",change_hexa);
 
   function rouge(){
     fct_saisie_valeur_rouge();
      change_hexa();
   }
   
   saisie_rouge.addEventListener("change",rouge);



let valeur_rouge = 0;
let zoneRouge = document.getElementById("chiffre_rouge");

function fct_saisie_valeur_rouge(){
  if (isNaN(saisie_rouge.value)) {
      alert("Veuillez ecrire un nombre");
   } else {
       valeur_rouge = parseInt(saisie_rouge.value,10);
       zoneRouge.innerHTML = valeur_rouge;
       fct_change_couleur();
   }
   if (valeur_rouge > 255){
    alert("vous ne pouvez que entrer des nombre de 0 à 255");
    valeur_rouge = 255 ;
    zoneRouge.innerHTML = valeur_rouge;
   }
   if (valeur_rouge < 0){
    alert("vous ne pouvez que entrer des nombre de 0 à 255");
    valeur_rouge = 0 ;
    zoneRouge.innerHTML = valeur_rouge;
   }
}
let saisie_rouge = document.getElementById("text_rouge");
saisie_rouge.addEventListener("change",fct_saisie_valeur_rouge,change_hexa);


function augmentation_rouge(){
    valeur_rouge = valeur_rouge + 1;
    zoneRouge.innerHTML = valeur_rouge;
    if (valeur_rouge > 255){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_rouge = 255 ;
    }
     zoneRouge.innerHTML = valeur_rouge;
    fct_change_couleur();
    $
  }
 let bouton_rouge_plus = document.getElementById("rouge+");
 bouton_rouge_plus.addEventListener("click",augmentation_rouge,change_hexa);

 
 function diminution_rouge(){
    valeur_rouge = valeur_rouge - 1;
    zoneRouge.innerHTML = valeur_rouge;
    if (valeur_rouge < 0){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_rouge = 0 ;
    }
     zoneRouge.innerHTML = valeur_rouge;
    fct_change_couleur();
  }
 let bouton_rouge_moins = document.getElementById("rouge-");
 bouton_rouge_moins.addEventListener("click",diminution_rouge,change_hexa);
let boite_coloree = document.getElementById("boite_couleur")


function fct_change_couleur(){
    debutRVB = "rgb(" ;
	codeRVB = debutRVB.concat(valeur_rouge,",",valeur_vert,",",valeur_bleu,")");
	boite_coloree.style.backgroundColor = codeRVB;
}

let valeur_vert = 0;
let zoneVert = document.getElementById("chiffre_vert");

function fct_saisie_valeur_vert(){
    if (isNaN(saisie_vert.value)) {
        alert("Veuillez ecrire un nombre");
     } else {
         valeur_vert = parseInt(saisie_vert.value,10);
         zoneVert.innerHTML = valeur_vert;
         fct_change_couleur();
     }
     if (valeur_vert > 255){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_vert = 255 ;
      zoneVert.innerHTML = valeur_vert;
     }
     if (valeur_vert < 0){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_vert = 0 ;
      zoneVert.innerHTML = valeur_vert;
     }
  }


  let saisie_vert = document.getElementById("text_vert");
  saisie_vert.addEventListener("change",fct_saisie_valeur_vert,change_hexa)
  
  function augmentation_vert(){
      valeur_vert = valeur_vert + 1;
      zoneVert.innerHTML = valeur_vert;
      if (valeur_vert > 255){
        alert("vous ne pouvez que entrer des nombre de 0 à 255");
        valeur_vert = 255 ;
      }
       zoneVert.innerHTML = valeur_vert;
      fct_change_couleur();
    }
   let bouton_vert_plus = document.getElementById("vert+");
   bouton_vert_plus.addEventListener("click",augmentation_vert,change_hexa);
  
  

  function diminution_vert(){

    valeur_vert = valeur_vert - 1;
    zoneVert.innerHTML = valeur_vert;
    if (valeur_vert < 0){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_vert = 0 ;
    }
     zoneVert.innerHTML = valeur_vert;
     fct_change_couleur();
    }
  let bouton_vert_moins = document.getElementById("vert-");
  bouton_vert_moins.addEventListener("click",diminution_vert,change_hexa);


let valeur_bleu = 0;
let zoneBleu = document.getElementById("chiffre_bleu");

function fct_saisie_valeur_bleu(){
    if (isNaN(saisie_bleu.value)) {
        alert("Veuillez ecrire un nombre");
     } else {
         valeur_bleu = parseInt(saisie_bleu.value,10);
         zoneBleu.innerHTML = valeur_bleu;
         fct_change_couleur();
     }
     if (valeur_bleu > 255){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_bleu = 255 ;
      zoneBleu.innerHTML = valeur_bleu;
     }
     if (valeur_bleu < 0){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_bleu = 0 ;
      zoneBleu.innerHTML = valeur_bleu;
     }
  }


let saisie_bleu = document.getElementById("text_bleu");
saisie_bleu.addEventListener("change",fct_saisie_valeur_bleu,change_hexa)
  
  function augmentation_bleu(){
      valeur_bleu = valeur_bleu + 1;
      zoneBleu.innerHTML = valeur_bleu;
      if (valeur_bleu > 255){
        alert("vous ne pouvez que entrer des nombre de 0 à 255");
        valeur_bleu = 255 ;
      }
       zoneBleu.innerHTML = valeur_bleu;
       fct_change_couleur();
      }
   let bouton_bleu_plus = document.getElementById("bleu+");
   bouton_bleu_plus.addEventListener("click",augmentation_bleu,change_hexa);
  
   
  function diminution_bleu(){

    valeur_bleu = valeur_bleu - 1;
    zoneBleu.innerHTML = valeur_bleu;
    if (valeur_bleu < 0){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_bleu = 0 ;
    }
     zoneBleu.innerHTML = valeur_bleu;
     fct_change_couleur();
    }
  let bouton_bleu_moins = document.getElementById("bleu-");
  bouton_bleu_moins.addEventListener("click",diminution_bleu);
  document.body.style.backgroundColor = "rgb(164,191,209)";
  function change_hexa(){
   let valeur_Hexa_Decimale_rouge = zoneRouge.toString(16); 
   let valeur_Hexa_Decimale_vert = zoneVert.toString(16); 
   let valeur_Hexa_Decimale_bleu = zoneBleu.toString(16); 
   let valeur_Hexa_Decimale = document.getElementById("valeur");   
   valeur_Hexa_Decimale = valeur_Hexa_Decimale_rouge + valeur_Hexa_Decimale_vert + valeur_Hexa_Decimale_bleu;
  }


#boite_couleur {
	background-color : white;
    height : 100px;
	width : 300px;
    border: 3px black solid;
}
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
6 mai 2022 à 22:43
Bonjour,

Je constate que tu as toujours X fonctions pour chaque couleur .. tu n'as donc pas tenu compte de ce que je t'ai déjà indiqué..
En plus.. tu dis avoir un souci... sans préciser lequel ...
On n'est pas là pour jouer aux devinettes..... et si tu pouvais expliquer ton souci sans qu'on ait besoin de tester ton code ( que nous n'avons que partiellement en plus...) ça serait idéal !

Bref, commence par nous expliquer en détails le souci constaté ... et surtout .. pense à ajouter des console.log dans ton code et à regarder dans la console js de ton navigateur pour voir ce que ça te donne et si tu n'y aurait pas des messages d'erreur...
En fonction de tes retours.. on verra ce qu'on peut faire pour toi !
0
momo9213
Modifié le 6 mai 2022 à 23:02
bonjour
j au bien tenu compte de votre conseille c'est juste que je trouve ma methode un peu plus simple pour le moment mais quand j aurais fini de régler les petit problèmes comme ceux que je rencontre je pourrai passe a ce genre de problème(sans vous offenser ).
Le problème est donc que je n arrive point a passer mes valeurs décimal vers l hexadécimal du coup le problème se situe dans la dizaine de dernière ligne du JS
0
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721 > momo9213
6 mai 2022 à 23:19
C'est un peu fatiguant de se répéter ..
Mais je persiste :
As tu mis des console.log pour voir ce que contiennent tes variables ?
As tu regardé dans la console de ton navigateur si il n'y a pas de messages d'erreur ?

et puis... Ton champ "valeur" est de quel type ? c'est un input ? tu n'aurais pas oublié de mettre un .value pour pouvoir lui affecter une valeur ?
0
momo9213 > jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025
6 mai 2022 à 23:35
j ai essayée plusieurs fois de mettre des console log j ai regarder sur internet en quoi cela pouvais m aider et comment l'utiliser j'ai regarder sur la console de mon navigateur il me disait que une variable n était pas définit de donc je l'ai définit mais ca n'a rien change.
j'ai essaye avec les .value et il me semble que aucun n'est un input
0
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721 > momo9213
6 mai 2022 à 23:40
Ca aurait été bien de nous montrer ton code avec les console.log ET les .value ...

Mais bon..
Essaye ça et dis nous ce que ça te donne dans la console 
function change_hexa(){
   let valeur_Hexa_Decimale_rouge = zoneRouge.value.toString(16); 
   let valeur_Hexa_Decimale_vert = zoneVert.value.toString(16); 
   let valeur_Hexa_Decimale_bleu = zoneBleu.value.toString(16); 
   console.log( zoneRouge.value, zoneVert.value, zoneBleu.value);
   console.log(valeur_Hexa_Decimale_rouge,valeur_Hexa_Decimale_vert,valeur_Hexa_Decimale_bleu);
   let codeHexa = valeur_Hexa_Decimale_rouge + valeur_Hexa_Decimale_vert + valeur_Hexa_Decimale_bleu;
   console.log('codeHexe',codeHexe);
   let valeur_Hexa_Decimale = document.getElementById("valeur");   
   valeur_Hexa_Decimale.value = codeHexe;
}

(PS: n'hésites pas à nous en mettre une capture d'écran )
0
Réponse 2 / 3
momo9213
6 mai 2022 à 23:45
je pense ne vraiment pas avoir compris a quoi servait le console.log mais j'envoie comme même le code que j'avais modifié et je test ce que vous m'avez envoyée
document.body.style.backgroundColor = "rgb(164,191,209)";
let valeur_rouge = 0;
let zoneRouge = document.getElementById("chiffre_rouge");

function fct_saisie_valeur_rouge(){
  if (isNaN(saisie_rouge.value)) {
      alert("Veuillez ecrire un nombre");
   } else {
       valeur_rouge = parseInt(saisie_rouge.value,10);
       zoneRouge.innerHTML = valeur_rouge;
       fct_change_couleur();
   }
   if (valeur_rouge > 255){
    alert("vous ne pouvez que entrer des nombre de 0 à 255");
    valeur_rouge = 255 ;
    zoneRouge.innerHTML = valeur_rouge;
   }
   if (valeur_rouge < 0){
    alert("vous ne pouvez que entrer des nombre de 0 à 255");
    valeur_rouge = 0 ;
    zoneRouge.innerHTML = valeur_rouge;
   }
}
let saisie_rouge = document.getElementById("text_rouge");
saisie_rouge.addEventListener("change",rouge);



function augmentation_rouge(){
    valeur_rouge = valeur_rouge + 1;
    zoneRouge.innerHTML = valeur_rouge;
    if (valeur_rouge > 255){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_rouge = 255 ;
    }
     zoneRouge.innerHTML = valeur_rouge;
    fct_change_couleur();
  }
 let bouton_rouge_plus = document.getElementById("rouge+");
 bouton_rouge_plus.addEventListener("click",augmentation_rouge);

 
 function diminution_rouge(){
    valeur_rouge = valeur_rouge - 1;
    zoneRouge.innerHTML = valeur_rouge;
    if (valeur_rouge < 0){
      alert("vous ne pouvez que entrer des nombre de 0 à 255");
      valeur_rouge = 0 ;
    }
     zoneRouge.innerHTML = valeur_rouge;
    fct_change_couleur();
  }
 let bouton_rouge_moins = document.getElementById("rouge-");
 bouton_rouge_moins.addEventListener("click",diminution_rouge);
let boite_coloree = document.getElementById("boite_couleur")


function fct_change_couleur(){
    debutRVB = "rgb(" ;
 codeRVB = debutRVB.concat(valeur_rouge,",0",",0)");
 boite_coloree.style.backgroundColor = codeRVB;
}



function change_hexa(){
    let valeur_Decimale_rouge = zoneRouge.innerHTML;
    let valeur_Hexa_Decimale_rouge = valeur_Decimale_rouge.value.toString(16);
    let valeur_Hexa_Decimale = document.getElementById("valeur");   
    valeur_Hexa_Decimale.innerHTML = valeur_Hexa_Decimale_rouge;
    valeur_Hexa_Decimale.addEventListener("change",change_hexa);
}
console.log(change_hexa(14));
 
   function rouge(){
     fct_saisie_valeur_rouge();
      change_hexa();
   }
   
   saisie_rouge.addEventListener("change",rouge);
0
jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025 4 721
6 mai 2022 à 23:48
je confirme .. tu n'as rien compris au console.log ni à l'utilisation des fonctions, au passage de paramètres et au retour des données éventuelles d'une fonction.
Ton console.log ne sert strictement à rien là ou tu l'as mis et avec ce que tu y a mis..
J'espère que mon exemple t'aidera à y voir un peu plus clair...
0
momo9213 Messages postés 16 Date d'inscription mardi 26 avril 2022 Statut Membre Dernière intervention 27 novembre 2022 > jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025
7 mai 2022 à 00:02
et avec tout le code :
0
momo9213 > jordane45 Messages postés 38367 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 janvier 2025
7 mai 2022 à 01:14
et sur le passage si sa ne vous dérange pas auriez vous un cour sur le console.log car je n'en trouve aucun qui est bien ou compréhensible
0
Réponse 3 / 3
momo9213 Messages postés 16 Date d'inscription mardi 26 avril 2022 Statut Membre Dernière intervention 27 novembre 2022
6 mai 2022 à 23:55
je pense que je vais essayé de trouver d'autre site pour apprendre a utiliser le console.log vue que c'est les première fois que je les utilise et je vous envoie ce que j'ai obtenu
0

Discussions similaires

Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
il est en cours de transport vers votre site de livraison
3rin -
Afrikarnak -

4 réponses
[EXCEL 2000] Convertir heure en décimal
shp -
Mcnell1 -

23 réponses
le site de distribution
youyou -
brucine -

2 réponses