Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Why Doesnt The Colour Of My Boxes Change When Prompted And Confirmed?

Post a Comment
for some reason my prompts and conditions doesnt change my boxes to yellow then to red then to the original color. anyone knows why? i expected it to change colors the users pre

Solution 1:

This worked for me.

Explanation:

  1. I noticed that JavaScript cannot read element.style from the .white class, but could do so when I inserted in-line CSS to each element. This is demostrated in the following jsfiddle.

  2. You were using the this scope in your function, without actually providing what this actually is. So, I passed a this argument in the click event handler, and since this cannot be used as a function parameter, changed it to e. 

function myFunction(e) {
  if (confirm("Press a button!") == true) {

    if (e.style.backgroundColor == "white")
      e.style.backgroundColor = "yellow";
    else if (e.style.backgroundColor == "yellow")
      e.style.backgroundColor = "red";
    else if (e.style.backgroundColor == "red")
      e.style.backgroundColor = "white"
    else
      e.style.backgroundColor = "white";
  } else {
    txt = "You pressed Cancel!";
  }

  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}

var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    myFunction(this);
  });
}
.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}

.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
<div class="whole">
  <div id="centerbox1" class="foo" style="background:white;">A1</div>
  <div id="centerbox2" class="foo" style="background:white;">A2</div>
  <div id="centerbox3" class="foo" style="background:white;">A3</div><br><br>

  <div id="centerbox4" class="foo" style="background:white;">B1</div>
  <div id="centerbox5" class="foo" style="background:white;">B2</div>
  <div id="centerbox6" class="foo" style="background:white;">B3</div>
</div>

Solution 2: 

function myFunction(e) {
  if (confirm("Press a button!") == true) {

    if (e.style.backgroundColor == "white")
      e.style.backgroundColor = "yellow";
    else if (e.style.backgroundColor == "yellow")
      e.style.backgroundColor = "red";
    else if (e.style.backgroundColor == "red")
      e.style.backgroundColor = ""
    else
      e.style.backgroundColor = "";
  } else {
    txt = "You pressed Cancel!";
  }

  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}

var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    myFunction(this);
  });
}
.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}

.white {
  background-color: white;
}

.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}
<div class="whole">
  <div id="centerbox1" class="foo" style="background:white;">A1</div>
  <div id="centerbox2" class="foo" style="background:white;">A2</div>
  <div id="centerbox3" class="foo" style="background:white;">A3</div><br><br>

  <div id="centerbox4" class="foo" style="background:white;">B1</div>
  <div id="centerbox5" class="foo" style="background:white;">B2</div>
  <div id="centerbox6" class="foo" style="background:white;">B3</div>
</div>

heres the answer i sought for!

     <!doctype html>
<html>
<head>
<script language ="javascript">
function myFunction(e) {
  if (confirm("Press a button!") == true) {

    if (e.style.backgroundColor == "white")
      e.style.backgroundColor = "yellow";
    else if (e.style.backgroundColor == "yellow")
      e.style.backgroundColor = "red";
    else if (e.style.backgroundColor == "red")
      e.style.backgroundColor = ""
    else
      e.style.backgroundColor = "";
  } else {
    txt = "You pressed Cancel!";
  }

  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}

var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    myFunction(this);
  });
}
</script>


<style type="text/css">
.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}

.white {
  background-color: white;
}

.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

</style>
</head>

<body>
<div class="whole">
  <div id="centerbox1" class="foo" style="background:white;">A1</div>
  <div id="centerbox2" class="foo" style="background:white;">A2</div>
  <div id="centerbox3" class="foo" style="background:white;">A3</div><br><br>

  <div id="centerbox4" class="foo" style="background:white;">B1</div>
  <div id="centerbox5" class="foo" style="background:white;">B2</div>
  <div id="centerbox6" class="foo" style="background:white;">B3</div>
</div>
</body>
</html>

here is my html code that doesnt work even tho i copied and pasted the code snippet


Post a Comment for "Why Doesnt The Colour Of My Boxes Change When Prompted And Confirmed?"