Moises Miguel Moises Miguel - 1 year ago 64
CSS Question

How do I get my red div to change background color to toggle between red and green when I click on the swap button?

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>




Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download