how to make javascript function call two divs

Question

i am trying to make a colour change when a button is clicked and i managed to do this however i want to change the colour of not just the main content container but more containers how do i do this?

    function changeblackandwhite(objDivID) {
  if(document.getElementById(objDivID).style.color=='black'){
    document.getElementById(objDivID).style.color='white';
    document.getElementById(objDivID).style.backgroundColor='black';
  }

  else if(document.getElementById(objDivID).style.color=='white'){
    document.getElementById(objDivID).style.color='black';
    document.getElementById(objDivID).style.backgroundColor = 'white';
  }

  else{
    document.getElementById(objDivID).style.color='black';
    document.getElementById(objDivID).style.backgroundColor='white';
  }
}

<a href="javascript:changeblackandwhite('Maincontainer')"><img src="images/colour.jpg" title="Change Text/Backgroud Colors"></a>

Are you willing to use jquery? jquery can do this with 1 line of code. — alanmanderson
– alanmanderson, Commented Feb 21, 2013 at 23:14
@the system - Very simply - do more with less - jQuery takes all the drudgery out of locating and traversing the DOM. — Dave G
– Dave G, Commented Feb 21, 2013 at 23:22
@thesystem Because he's doing DOM manipulation, the core strength of jQuery. I'm seeing in his example points for selectors, css manipulation, and event binding. jQuery has solved these problems, and the solutions have been vetted by experts. Why shun that effort? — Mike Robinson
– Mike Robinson, Commented Feb 21, 2013 at 23:24

Dave G · Accepted Answer · 2013-02-21 23:33:11Z

2

There are dozens of ways you can accomplish this.

You could change the argument of your function to be an array of strings. You could also reduce the complexity of your function as well

<script type="text/javascript">
changeblackandwhite = function() {
  for( var idx=0; idx < arguments.length; idx++) {
    var tgtDiv= document.getElementById(arguments[i]);
    if(tgtDiv.style.color=='black'){
        tgtDiv.style.color='white';
        tgtDiv.style.backgroundColor='black';
    }
    else{
        tgtDiv.style.color='black';
        tgtDiv.style.backgroundColor='white';
    }
  }
};
</script>

<a href="javascript:changeblackandwhite('Maincontainer', 'Container2')"><img src="images/colour.jpg" title="Change Text/Backgroud Colors"></a>

As another reader questioned - you can do this with jQuery in a single line.

With jQuery, you can declare the elements in question to have a class attribute.

Using jQuery, you can then do something like:

$('div.someClass').css({'color': 'black', 'background-color': 'white'});

The argument to jQuery can be a class based selector, an id based selector, or any other selector you choose.

edited Feb 21, 2013 at 23:33

answered Feb 21, 2013 at 23:21

Dave G

9,82238 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

the system Over a year ago

Get rid of the else if condition, since it matches the default.

the system Over a year ago

+1 since the first half answers OP's question, but FWIW, in 99% of the browsers, you can use 'div.someClass' for DOM selection without loading a library.

alanmanderson · Accepted Answer · 2013-02-21 23:33:09Z

0

If you are open to jquery and you assign 1 class in common with these two divs you can do the following: This should get you started (see this jsfiddle): I changed the fiddle to include a neater solution where clicking on the button adds and removes classes on the containers which allows you to set multiple attributes including the text color in one quick call.

<div class='container'>
</div>
<div class='container'>
</div>
<button id="changeColor" type="button">Change Color </button>


<script type="text/javascript">
$(document).ready( function() {
    $('#changeColor').click( function() {
        if ($('.container').hasClass("blackContainer")){
            $('.container').addClass("whiteContainer");
            $('.container').removeClass("blackContainer");
        } else {
            $('.container').removeClass("whiteContainer");
            $('.container').addClass("blackContainer");
        }

    });
});
</script>

//CSS
.blackContainer {
    background-color: black;
    color: white;
}

.whiteContainer {
    background-color: white;
    color: black;
}

edited Feb 21, 2013 at 23:33

answered Feb 21, 2013 at 23:20

alanmanderson

8,31012 gold badges56 silver badges89 bronze badges

5 Comments

Dave G Over a year ago

you should be doing .css('background-color', 'white')

alanmanderson Over a year ago

Yup, I fixed it, Also including a jsfiddle

the system Over a year ago

Your .hasClass() will return true if any element in the collection has the class. You'll need to iterate the collection and test each element individually.

alanmanderson Over a year ago

That is a good point, however in this particular instance, OP wants the 2 divs to change the same, so they should all be in the same state. If 1 has the class they all should. For the sake of good programming practices, you are definitely right.

the system Over a year ago

@ajon: From the code that OP gave, it does seem that could be the case. If the DOM starts off with some having different styles, then they would need to be individually checked. Either way, if the elements arrive with one or the other class, then you could just do $(".container").toggleClass("blackContainer whiteContainer"), and each class will be toggled on each element.

Just Aguy · Accepted Answer · 2013-02-22 00:17:24Z

I made a jsfiddle for you to play around with jsfiddle

I also did the javascript/jQuery in a similar way as the OP since it usually helps them understand.

As stated above, there are several different ways to do this, I've done but one.

The document.ready function sets up an event listener for the object to be clicked, most of the time this is how you'll see events coded. So when the link is clicked, it calls the function with the string name of the object the listener is for.

$(document).ready(function() {
    $("#changeit").click(function(){
       changeblackandwhite("Maincontainer");  
    })
});

After the event listener is assigned, it will call the function below when the link is clicked on.

// Here's your function, put the current color in a var, check if it's black
// if black, change colors, else make it black.
function changeblackandwhite(objDivID) {
     var curColor = $("#" + objDivID).css("color");
     if( curColor == 'rgb(0, 0, 0)'){ 
         $("#"+objDivID).css({'color':'white','background-color':'black'});
     } else {
         $("#"+objDivID).css({'color':'black','background-color':'ghostwhite'});
     }
}

Collectives™ on Stack Overflow

how to make javascript function call two divs

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related