Change text color and background color using javascript

Question

I need to have serval buttons on this web page to change the

color and background color. Here are the actual text and CSS file plus the javascript

function changeForeground() {
  var div = document.getElementById("foreground").className = "colorA";
}

function changeBackground() {
  var div = document.getElementById("background").className = "backgroundB";
}

.colorA {
  color: #4581cf;
}
.colorB {
  color: #B7E2FF;
}
.backgroundA {
  background-color: #4581cf;
}
.backgroundB {
  background-color: #B7E2FF;
}

<div id="background" class="backgroundA">
  <div id="foreground" class="colorB">
    <p>blah blah blah</p>
  </div>
</div>

Foreground
<INPUT type="button" Value="A" class="colorA" id="button1" onclick="changeForeground()" ;>
<INPUT type="button" Value="B" class="colorB" id="button2" onclick="changeForeground()" ;>Background
<INPUT type="button" Value="C" class="backgroundA" id="button3" onclick="changeBackground()" ;>
<INPUT type="button" Value="D" class="backgroundB" id="button4" onclick="changeBackground()" ;>

right now I can only change the text color by typing the actually class such as "colorA" and "backgroundB" after I get the element by Id to change the color. but what I am trying to do is in the javascript function, how can I change the text color based on which button I click. What I mean is after I get the element by Id such as "foreground", how can I change its current class (colorB) to the class (colorA) if I just clicked button A

Have the different buttons' onclick handlers either call a different function, or pass different parameters to that function. (onclick handlers don't have to be a single function call; they can be any JS code.) — qxz
– qxz, Commented Feb 8, 2017 at 6:41

Suren Srapyan · Accepted Answer · 2017-02-08 06:42:33Z

Pass the class name to the function and use it

function changeForeground(cls){
  var div = document.getElementById("foreground").className=cls;
}
                                        
function changeBackground(cls){
  var div = document.getElementById("background").className=cls;
}

.colorA{
      color: #4581cf;
    }

    .colorB{
      color: #B7E2FF;
    }

    .backgroundA{
      background-color: #4581cf;
    }

    .backgroundB{
      background-color: #B7E2FF;
    }

<div id="background" class="backgroundA">
   <div id="foreground" class="colorB">
        <p>blah blah blah</p>
   </div>
</div>

Foreground 
    <INPUT type="button" Value="A" class="colorA" id="button1" onclick ="changeForeground('colorA')";>
    <INPUT type="button" Value="B" class="colorB" id="button2" onclick ="changeForeground('colorB')";>

Background
    <INPUT type="button" Value="C" class="backgroundA" id="button3" onclick ="changeBackground('backgroundA')";>
    <INPUT type="button" Value="D" class="backgroundB" id="button4" onclick ="changeBackground('backgroundB')";>

Kishore Krishnan · Accepted Answer · 2017-02-08 06:49:53Z

1

Try this:

function changeForeground()
{
    var div = document.getElementById("foreground").style.color = "#4581cf";
}

function changeBackground()
{
    var div =    document.getElementById("background").style.backgroundColor = "#B7E2FF";
}

answered Feb 8, 2017 at 6:49

Kishore Krishnan

212 bronze badges

Comments

Wassim Ben Hssen · Accepted Answer · 2017-02-08 07:50:14Z

0

Try this with jquery

     function changeForeground()
        {var div = $(#foreground).css('color' :'#4581cf');}

answered Feb 8, 2017 at 7:50

Wassim Ben Hssen

5297 silver badges24 bronze badges

Collectives™ on Stack Overflow

Change text color and background color using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related