How do I get my red div to change background color to toggle between red and green when I click on the swap button?
Question
In the following code, how do I get my red div to change background color to toggle between red and green when I click on the swap button?
$(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready'); $("#create").on('click', createNewDiv); // $(".color-div").on('click', '.delete', deleteDiv); } function createNewDiv() { console.log('inside createNewDiv'); var $div = $("<div class = 'color-div'>" + "<p>" + numberOfClicks++ +"</p>" + "</div>"); var $button1 = $('<button class = delete>Delete</button>'); var $button2 = $('<button class = swap>Swap</button>'); $('#container').append($div); $($div).append($button1); $($div).append($button2); //this is the event listener for the delete button $('.delete').on('click', function() { console.log('inside delete button'); $(this).parent().remove(); }); $('.swap').on('click', function() { console.log('inside swap button'); $(this).parent().toggleClass("green"); }); } function deleteDiv() { console.log('delete button pressed'); }
/* CSS Stylesheet */ /* ---------- DO NOT MODIFY THIS FILE ---------- */ body { font-family: sans-serif; } .color-div{ height:5em; width:100%; background-color: red; display: block; margin-bottom: 1em; }
<!DOCTYPE html> <!-- DO NOT MODIFY THIS FILE --> <html> <head> <meta charset="utf-8"> <title>First Code Challenge</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="script.js" charset="utf-8"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>My First Code Challenge</h1> </header> <main> <h1>Main Content Heading</h1> <button id="create">CREATE BUTTON</button> <div id="container"></div> </main> </body> </html>
1 answers
solution1
0 ACCPTED 2017-05-22 19:51:41
You're toggling a class "green" on click of swap, if you add a CSS class for green like so, it should work:
$(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready'); $("#create").on('click', createNewDiv); // $(".color-div").on('click', '.delete', deleteDiv); } function createNewDiv() { console.log('inside createNewDiv'); var $div = $("<div class = 'color-div'>" + "<p>" + numberOfClicks++ + "</p>" + "</div>"); var $button1 = $('<button class = delete>Delete</button>'); var $button2 = $('<button class = swap>Swap</button>'); $('#container').append($div); $($div).append($button1); $($div).append($button2); //this is the event listener for the delete button $('.delete').on('click', function() { console.log('inside delete button'); $(this).parent().remove(); }); $('.swap').on('click', function() { console.log('inside swap button'); $(this).parent().toggleClass("green"); }); } function deleteDiv() { console.log('delete button pressed'); }
/* CSS Stylesheet */ /* ---------- DO NOT MODIFY THIS FILE ---------- */ body { font-family: sans-serif; } .color-div { height: 5em; width: 100%; background-color: red; display: block; margin-bottom: 1em; } .green { background-color: green; }
<!DOCTYPE html> <!-- DO NOT MODIFY THIS FILE --> <html> <head> <meta charset="utf-8"> <title>First Code Challenge</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="script.js" charset="utf-8"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>My First Code Challenge</h1> </header> <main> <h1>Main Content Heading</h1> <button id="create">CREATE BUTTON</button> <div id="container"></div> </main> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I get my text to wrap from the red div to the green div?
How do I change my javascript so that only the selected button is coloured red or green
How do i change background color using radio buttons in tables. 4 colors(white, red, yellow, green) to each radio buttons
Change background color between red and green every second
Toggeling Color of my header between red and green
How do I change the hover color to red for Cufon fonts on menu?
How do I make the circles change color with Javascript when I click on them? Also, how do I make text appear if all circles are red? I
I want the color of the ball to change the red when it hits the wall.How do I add that code?
How do I fix red and green blocks with CSS ？
how to change select border color to red on button click
Related Tags