Modifier la couleur de la police en cliquant sur un bouton

Question

Modifier la couleur de la police en cliquant sur un bouton

Demandé el 16 de Mai, 2018: Quand la question a-t-elle été
1210 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de faire en sorte que les éléments de la classe de paragraphe "answer", la police en fait, changent de couleur en cliquant sur un bouton. Je n'essaie pas de changer la couleur d'arrière-plan comme dans d'autres questions Javascript sur stack exchange, mais les caractères de l'élément, la couleur de la police. De plus, j'ai besoin d'utiliser ceci encore et encore, donc je préfèrerais utiliser les fonctions de la classe plutôt que l'id. Je veux que la couleur de la police des caractères soit blanche pour la fonction hideFunction, ce qui correspondra à l'arrière-plan et "cachera" les lettres. Dans la fonction showFunction, je veux que la couleur du paragraphe soit noire, ce qui, sur un fond blanc, fera apparaître les caractères en gras.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Book Title</title>
<script>
function showFunction() {
    var x = document.getElementsByClassName("answer");
    x.style.color = "black";
}
function hideFunction() {
    var x = document.getElementsByClassName("answer");
    x.style.color = "white";
}
</script>
<style> 
</style> 
</head>
<body>
    <h1>Book Title </h1>
    <p class="question"> This is a question. 
    </p> 
    <p class="answer">This is an answer.
    </p>
    <br />
    <div>
        <label>Check Answer:</label>
        <button  onclick="showFunction()">Show Answer</button>
        <button  onclick="hideFunction()">Hide Answer</button> 
    </div>
</body>
</html>

Demandé el 16 de Mai, 2018 par capser

Answer 1

5 Réponses

Answer 2

1voto

Err Hunter Points 309

getElementsByClassName() Renvoie un objet de type tableau contenant tous les éléments enfants qui ont tous les noms de classe donnés. En savoir plus sur MDN

Votre code devrait donc ressembler à ceci,

function showFunction() {
    var x = document.getElementsByClassName("answer")[0];
    x.style.color = "black";
}

function hideFunction() {
    var x = document.getElementsByClassName("answer")[0];
    x.style.color = "white";
}

Voici le lien pour travailler jsFiddle

Répondu el 16 de Mai, 2018 par Err Hunter (309 Points )

Answer 3

1voto

K. P. Points 503

Depuis document.getElementsByClassName est pour les tableaux, vous devez utiliser

document.getElementsByClassName("answer")[0]; OU utilice id - document.getElementById("yourIDname");

function showFunction() {
var x = document.getElementsByClassName("answer")[0];
x.style.color = "black";
}
function hideFunction() {
var x = document.getElementsByClassName("answer")[0];
x.style.color = "white";
}

OU

function showFunction() {
var x = document.getElementById("yourIDname");
x.style.color = "black";
}
function hideFunction() {
var x = document.getElementById("yourIDname");
x.style.color = "white";
}

Répondu el 16 de Mai, 2018 par K. P. (503 Points )

Answer 4

1voto

Hanif Points 2667

Essayez ceci, cela fonctionnera d'un seul à plusieurs .answer élément :

function showFunction() {
    var x = document.getElementsByClassName("answer");
    for(var i = 0; i < x.length; i++){
        x[i].style.color = "black";
    }
}
function hideFunction() {
    var x = document.getElementsByClassName("answer");
    for(var i = 0; i < x.length; i++){
        x[i].style.color = "white";
    }
}

Répondu el 16 de Mai, 2018 par Hanif (2667 Points )

Answer 5

0voto

George Bailey Points 7920

document.getElementsByClassName vous donne la liste des nœuds, c'est-à-dire un tableau de nœuds. Et il n'y a pas de color sur une liste de nœuds.

Vous pouvez vouloir itérer à travers la liste, en récupérant chaque élément et en ajoutant des gestionnaires pour eux.

Ou si vous ne souhaitez obtenir qu'un seul élément. Le premier élément pour être plus précis, vous pouvez utiliser document.querySelector

function showFunction() {
    var x = document.querySelector(".answer");
    x.style.color = "black";
}
function hideFunction() {
    var x = document.querySelector(".answer");
    x.style.color = "red";
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Book Title</title>
</head>
<body>
    <h1>Book Title </h1>
    <p class="question"> This is a question. 
    </p> 
    <p class="answer">This is an answer.
    </p>
    <br />
    <div>
        <label>Check Answer:</label>
        <button  onclick="showFunction()">Show Answer</button>
        <button  onclick="hideFunction()">Hide Answer</button> 
    </div>
</body>
</html>

De plus, si vous apprenez les thins, vous devriez vous entraîner à ajouter des gestionnaires d'événements en JS plutôt qu'un gestionnaire en ligne onclick etc. C'est une mauvaise pratique. Il est préférable d'utiliser addEventListener comme

document.getElementById("btn1").addEventListener("click", showFunction);
document.getElementById("btn2").addEventListener("click", hideFunction);

function showFunction() {
    var x = document.querySelector(".answer");
    x.style.color = "black";
}
function hideFunction() {
    var x = document.querySelector(".answer");
    x.style.color = "white";
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Book Title</title>
</head>
<body>
    <h1>Book Title </h1>
    <p class="question"> This is a question. 
    </p> 
    <p class="answer">This is an answer.
    </p>
    <br />
    <div>
        <label>Check Answer:</label>
        <button id="btn1" >Show Answer</button>
        <button  id="btn2" >Hide Answer</button> 
    </div>
</body>
</html>

Répondu el 16 de Mai, 2018 par George Bailey (7920 Points )

Answer 6

0voto

Prabhu Points 701

Essayez comme ceci

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Book Title</title>
    <script>
    function showFunction() {
        var x = document.getElementsByClassName("answer")[0].style.color = 'black'
    }
    function hideFunction() {
        var x = document.getElementsByClassName("answer")[0].style.color = 'white'
    }
    </script>
    <style> 
    </style> 
    </head>
    <body>
        <h1>Book Title </h1>
        <p class="question"> This is a question. 
        </p> 
        <p class="answer">This is an answer.
        </p>
        <br />
        <div>
            <label>Check Answer:</label>
            <button  onclick="showFunction()">Show Answer</button>
            <button  onclick="hideFunction()">Hide Answer</button> 
        </div>
    </body>
    </html>

Répondu el 16 de Mai, 2018 par Prabhu (701 Points )

Modifier la couleur de la police en cliquant sur un bouton

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Modifier la couleur de la police en cliquant sur un bouton

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: