Changer le CSS avec onClick par Mojo_CC - page 1

20 avril 2018 à 20:04:57

Salut

Je cherche à changer la couleur de mon bouton avec onClick, mais rien à faire, ca ne fonctionne pas.

Surement une grosse erreur d'étourderie mais je ne trouve plus...

Voici mon code HTML :

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css"/>
    <script src="index.js"></script>
    <title></title>
  </head>
  <body>
    <div id="div">
    <button class="button" type="submit" name="button" onclick="switch()">Couleur</button>
  </div>
  </body>
</html>

Mon CSS :

.button {
  height: 60px;
  width: 180px;
}

Et mon JavaScript :

function switch() {
  Document.getElementsByClassName('button')('div').style.background = 'green';
};

Merci

NesKaphe

20 avril 2018 à 22:11:41

Hey !

Effectivement, petite erreur dans ton JS

Ce que tu voulais écrire c'est plutot :

document.getElementsByClassName('button')[0].style.background = 'green';

Dans un premier temps : c'est "document" et non "Document"

Puis ensuite il faut savoir que la fonction getElementsByClassName te retournera un NodeList (+ ou - un tableau). Donc si on regarde ton HTML tu n'as qu'un bouton qui porte la classe "button" donc tu veux sélectionner le premier élément pour lui changer son style.

J'espère que je t'ai aidé

Mojo_CC

20 avril 2018 à 22:33:55

Merci pour ton aide

Ca ne fonctionne toujours pas par contre.. Je te montre mon code :

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css"/>
    <script src="index.js"></script>
    <title></title>
  </head>
  <body>
    <div id="div">
    <button class="button" type="submit" name="button" onclick="switch()">Couleur</button>
  </div>
  </body>
</html>

.button {
  height: 60px;
  width: 180px;
  background-color: white;
}

function switch() {
  document.getElementsByClassName("button")[0].style.background = "green";
};

PS : getElementsById avec l'ID de la div ne fonctionne pas non plus

-
Edité par Mojo_CC 20 avril 2018 à 22:34:39

NesKaphe

20 avril 2018 à 22:39:20

Ouch j'avais pas vu... Mais tu as nommé ta fonction "switch".

Ce nom est déjà réservé en javascript (switch...case). Il te suffit de lui donner un autre nom et le tour sera joué

Mojo_CC

20 avril 2018 à 22:44:47

Ca fonctionne ! Merci beaucoup

Par contre pourquoi ca ne fonctionne pas avec :

function switch_color() {
  document.getElementsById("div").style.background = "green";
};

NesKaphe

20 avril 2018 à 22:52:51

Ca ne fonctionne pas car cette fonction n'existe pas (getElementsById)

Par contre, si tu utilise document.getElementById (sans le s à Element) là ça ne sera div qui contient ton bouton que tu vas récupérer.

Mojo_CC

20 avril 2018 à 22:56:42

Yes, merci beaucoup pour ton aide !

Changer le CSS avec onClick

Supprimer

Modérer

Signaler le message aux modérateurs