CODEWITHSUNDEEP
javascripthtmlcss
cosmichero2025
cosmichero2025

Reputation: 1029

How to change the background color and text color with the click of a button in javascript?

I'm trying to change three different paragraphs into colors that are following the same theme but different(not apparent in example, just a test). I can't get them to change however. :( I'm also willing to use a JQuery way of doing it.

HTML

<button onclick="white()">
        <p>White</p>
    </button>

    <button onclick="red()">
        <p>Red</p>
    </button>

    <button onclick="yellow()">
        <p>Yellow</p>
    </button>

    <button onclick="blue()">
        <p>Blue</p>
    </button>

    <h1>Hey There</h1>
    <ul class="list-unstyled">
        <li>Colors are cool</li>
        <li>Join the Rebellion!!!</li>
    </ul>


    <div class="colorbox" id="colorbox1">
        <h1>Div one</h1>
        <p>I'm 1</p>
    </div>

    <div class="colorbox" id="colorbox2">
        <h1>Div two</h1>
        <p>I'm 2</p>
    </div>

    <div class="colorbox" id="colorbox3">
        <h1>Div three</h1>
        <p>I'm 3</p>
    </div>

JAVASCRIPT

var colorbox1 = document.getElementsById('colorbox1');
var colorbox2 = document.getElementsById('colorbox2');
var colorbox3 = document.getElementsById('colorbox3');

function white() {
    colorbox1.style.backgroundColor = "white";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "white";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "white";
    colorbox3.style.color = "black";
}

function red() {
    colorbox1.style.backgroundColor = "red";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "red";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "red";
    colorbox3.style.color = "black";
}

function yellow() {
    colorbox1.style.backgroundColor = "yellow";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "yellow";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "yellow";
    colorbox3.style.color = "black";
}

function blue() {
    colorbox1.style.backgroundColor = "white";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "white";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "white";
    colorbox3.style.color = "black";
}

Upvotes: 3

Views: 1454

Answers (2)

IsraGab
IsraGab

Reputation: 5185

JQUERY way to deal with it: First of all I would have only one function. Just give it the color in parameter for example

onclick="changeColor('#3E6AA9')" //for blue

Here's a full code (didn't deal with background)

<button onclick="changeColor('#fff')">
        <p>White</p>
    </button>

    <button onclick="changeColor('#D80000')">
        <p>Red</p>
    </button>

    <button onclick="changeColor('#FBD505')">
        <p>Yellow</p>
    </button>

    <button onclick="changeColor('#0086BE')">
        <p>Blue</p>
    </button>

    <h1>Hey There</h1>
    <ul class="list-unstyled">
        <li>Colors are cool</li>
        <li>Join the Rebellion!!!</li>
    </ul>


    <div class="colorbox" id="colorbox1">
        <h1>Div one</h1>
        <p>I'm 1</p>
    </div>

    <div class="colorbox" id="colorbox2">
        <h1>Div two</h1>
        <p>I'm 2</p>
    </div>

    <div class="colorbox" id="colorbox3">
        <h1>Div three</h1>
        <p>I'm 3</p>
    </div>
    <script>
    function changeColor(color){
console.log(color);
$('.colorbox').css({'color': color});
}
    </script>

Check this working FIDDLE

Upvotes: 1

The Process
The Process

Reputation: 5953

There is no getElementsById() method, only getElementById() without s

var colorbox1 = document.getElementById('colorbox1');
var colorbox2 = document.getElementById('colorbox2');
var colorbox3 = document.getElementById('colorbox3');

Upvotes: 4

Related Questions