changer la couleur d'un titre

Question

Bonjour, je rencontre un problème de débutant : je voudrais qu'un input type='color' et un bouton changent la couleur d'un élément h1. Voici mon code: HTML: Mon premier site web

Mon titre principal

Javascript: const h = document.querySelector('#h1h1'); const coul = document.querySelector('#coul'); const btn = document.querySelector('#change'); bnt.addEventListener('click', function(){ getValue(); }); function getValue(){ let color = coul.value; h.style.color = color; }; Ce code ne marche pas, je ne sais pas pourquoi après avoir fait de nombreuses recherche sur internet et personnelles Merci d'avance pour votre aide.

@karamel · Answer

bonjour

les variable coul et btn sont déclarer trop tôt a l'instant ou elle son déclarer la page (le dom) n'a pas encore été chargé leur valeur est donc obsolète il faut englobe le tout dans un onload et il faut eviter les variables global afin d’éviter les scope de variable avec d'autres script, déclaré les valeur a l’intérieur de la fonction quitte a être rappelé a chaque appel a la fonction

window.addEventListener('load', function(){

let bnt = document.querySelector('#change');

bnt.addEventListener('click', function(){
  getValue()},false);

},false);

function getValue(){

let h = document.querySelector('#h1h1');
  let coul = document.querySelector('#coul');

color = coul.value;
  h.style.color = color;
  
};

tu peut aussi englober la fonction  dans la fonction annonyme du click

window.addEventListener('load', function(){

let bnt = document.querySelector('#change');

bnt.onclick=function(){

let h = document.querySelector('#h1h1');
  let coul = document.querySelector('#coul');

color = coul.value;
  h.style.color = color;}
},false);

LeoLeo99897 · Answer

Bonjour,

Je débute vraiment, alors je n'ai vraiment pas tout compris. Si j'ai bon en gros il faut que je déclare mes variables dans la fonction ?

Changer la couleur d'un titre

2 réponses

Votre réponse

Discussions similaires