11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Changer la couleur h1 d'un titre dynamiquement avec js et un

Bonjour, je m'appel Franck, j'ai 28 ans et je débute en javascript.
Je rencontre un soucis (peut être au niveau de ma condition je ne sait pas).
Le but étant de sélectionner une couleur avec un input, de récupérer la valeur et de l'appliquer au style de mon élément h1.
Je vous pose les parties de code qui corresponde à mon problème.


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id='titre'>Script</title>
</head>
<body>
    <h1 id='h1'>test</h1>
    <button id="boutonTitre" onclick="titre()">Titre de l'onglet de la page</button>
    <button id="boutonH1" onclick="h1()">Titre h1 de la page</button>
    <button id="boutonP" onclick="p()">Paragraphe de la page</button>
    <button id="boutonBootstrap" onclick="bootstrap()">Bootstrap dans la page</button>  
    <input type='color' id="inputCouleurH1" onclick="couleurH1()">Changer la couleur du titre h1</input>      
    <script src="script.js"></script>
</body>
</html>




function couleurH1() {
    var h1 = document.getElementById('h1');
    couleur = document.getElementById('inputCouleurH1').value;
    if (couleur =! '#000000') {
        h1.setAttribute('style', 'color : ' + couleur + ';');
        alert('La couleur ' + couleur + ' à bien été appliquée !')
    }
}


Il est probable que ma condition soit fausse, et j'imagine que pour que cela fonctionne le reste dépend d'une condition particulière.

Je vous remercie par avance de votre aide Smiley smile .
N'hésitez pas si il manque des détails !
Modifié par Knhfr (06 Aug 2020 - 21:09)
J'ai finalement réussit, je poste la solution au cas ou ça intéresse quelqu'un.


        var divCouleurH1 = document.createElement('div');
        var inputCouleurH1 = document.createElement('input');
        inputCouleurH1.innerHTML = 'Changer la couleur du titre h1';
        inputCouleurH1.id = 'inputCouleurH1';
        inputCouleurH1.setAttribute('onclick', 'couleurH1()');
        inputCouleurH1.setAttribute('type', 'color');
        var boutonCouleurH1 = document.createElement('button');
        boutonCouleurH1.innerHTML = 'Valider';
        boutonCouleurH1.setAttribute('onclick', 'couleurH1()');
        document.body.appendChild(divCouleurH1);
        divCouleurH1.appendChild(inputCouleurH1);
        divCouleurH1.appendChild(boutonCouleurH1);


ET


function couleurH1() {
    var h1 = document.getElementById('h1');
    value = document.getElementById('inputCouleurH1').value;
    h1.style.color = value;
}


D'un côté les éléments nécessaire sot créer en javascript, de l'autre la fonction récupère la valeur et la set.
Modifié par Knhfr (07 Aug 2020 - 19:21)
Sujet clos
Aller à