Changer la couleur d'un titre

LeoLeo99897 Messages postés 19 Date d'inscription mercredi 13 avril 2022 Statut Membre Dernière intervention 13 septembre 2023 - 22 nov. 2022 à 16:49
LeoLeo99897 Messages postés 19 Date d'inscription mercredi 13 avril 2022 Statut Membre Dernière intervention 13 septembre 2023 - 26 nov. 2022 à 10:19

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon premier site web</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
	<h1 id='h1h1'>Mon titre principal</h1>
    <input type="color" id="coul"><br><br>
    <button type="button" id='change'>changer la couleur du titre</button>
    <script src='scripts/chg coul.js'></script>
  </body>
</html>
  

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.

2 réponses

@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
Modifié le 25 nov. 2022 à 09:56

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


0
LeoLeo99897 Messages postés 19 Date d'inscription mercredi 13 avril 2022 Statut Membre Dernière intervention 13 septembre 2023
26 nov. 2022 à 10:19

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 ?

0
Rejoignez-nous