-1

The div tag referred to is the only code that I added to the HTML text. If possible please provide your answer in just jquery. $(document).ready(function(){ $("div").click(funcOne(), funcTwo()); 

$.funcOne = function(x) {document.getElementsByTagName("div").style.backgroundColor = "blue";};  

$.funcTwo = function(x) { document.getElementsByTagName("div").style.backgroundColor = "red";};  
      });
Mendel Yaffe
  • 3
  • 2
  • 3
    'Pure jQuery' - now that's a phrase. [`toggle()`](http://api.jquery.com/toggle-event/) for event handling has been deprecated, by the way. – Oka May 12 '15 at 22:47
  • I lost my right to ask questions for 3 days due to this question. Can someone please enlighten me as to how I could phrase this better so that I don't get banned again? Thanks – Mendel Yaffe May 13 '15 at 16:38
  • http://stackoverflow.com/help/how-to-ask Generally put, you need to be more descriptive, and show more effort towards researching and solving the problem on your own. The answer to this question could be found by just reading documentation, and is easily researched. The quality of the answer you chose reflects this; It's just code, there was no special research or explanation needed. If you simply spend more time studying the materials (JavaScript, jQuery) these types of problems would be trivial for you. – Oka May 13 '15 at 23:26

5 Answers5

1
$('div').click(function(){ 
    this.style.backgroundColor = this.style.backgroundColor === 'blue' ? 'red' : 'blue' 
})
Almis
  • 3,684
  • 2
  • 28
  • 58
0

Try this:

<div id="co"> <!-- no onclick method needed -->
<script>
$(document).ready(function() {
    $("#co").click(function() {
        $("body").css("background-color","blue"); //edit, body must be in quotes!
    });
});
</script>

Have you seen the explorer event listener? I think the problem is that toggle is not for call like an event for clic, it is used to show or hide an element from the dom.

bugs2919
  • 371
  • 1
  • 8
0

In newer jQuery versions .toggle() cannot be used any more for toggling two callback functions. It's used as a simple .show() / .hide() shorthand.

Toggle two colors using Array.reverse():

var colors = ["blue", "red"];
$("div").click(function() {
    $(this).css({ background : colors.reverse()[0] });
});

More about toggling two functions: https://stackoverflow.com/a/21520499/383904

Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

To answer your question of 'every other click'.

var divCount = 0;
$('div').click(function() {
    divCount++;
    if( divCount % 2 == 0) {
        $(this).css('background-color', $(this).css('background-color') == 'blue' ? 'red' : 'blue' );
    }
});
dajoto
  • 310
  • 3
  • 14
0

I can't give you JQuery, but I can give a vanilla solution:

var div = document.getElementsByTagName('div');

div.addEventListener('click', funcOne);

function funcOne(){
   div.style.backgroundColor = "blue";
   div.removeEventListener('click', funcOne);
   div.addEventListener('click', funcTwo);
}

function funcTwo(){
   div.style.backgroundColor = "red";
   div.removeEventListener('click', funcTwo);
   div.addEventListener('click', funcOne);
}

This method has worked for me before and (the few times I've tried) the toggle() method has been a bit of a flop. So convert the above to JQuery and just run two (or more) click()'s in sequence.

If you want the color to change only on certain clicks, place the event listener add/remove (in funcOne() ) inside a counter that iterates every time funcOne occurs. Attach the counter to a variable, and when the counter = N (where n = the size of each interval in clicks), change the event listeners and reset the counter.

Paul Ferris
  • 346
  • 5
  • 17