CODEWITHSUNDEEP
javascripthtmlcss
hJeff5511
hJeff5511

Reputation: 11

Change text color and background color using javascript

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

Upvotes: 1

Views: 3652

Answers (3)

Wassim Ben Hssen
Wassim Ben Hssen

Reputation: 529

Try this with jquery

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

Upvotes: 0

Kishore Krishnan
Kishore Krishnan

Reputation: 21

Try this:

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

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

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68635

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')";>

Upvotes: 4

Related Questions