What could be causing the lack of color change in my boxes even after confirming the prompt?

Question

What could be causing the lack of color change in my boxes even after confirming the prompt?

function changeColor() {
if (confirm("Press a button!") == true) {
  if(this.style.backgroundColor == "white")
    this.style.backgroundColor = "yellow";
  else if(this.style.backgroundColor == "yellow")
    this.style.backgroundColor = "red";
  else if(this.style.backgroundColor == "red")
    this.style.backgroundColor = "" 
  else
    this.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 boxes = document.getElementsByClassName("foo");
for (i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("click", changeColor);
}

.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}

.white{
  background: #FFFFFF;
}

.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 white">A1</div>
  <div id="centerbox2" class="foo white">A2</div>
  <div id="centerbox3" class="foo white">A3</div><br><br>

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

There seems to be an issue with the prompts and conditions not changing the color of the boxes as expected. The code was designed to change the colors when the user confirms a prompt, but for some reason, the behavior is not working as intended. Any insights on why this might be happening would be greatly appreciated. For example, when clicking on a square, it should prompt a yes or no response, resulting in the color changing to yellow. Clicking on the same square again, which is now yellow, should prompt another confirmation and change the color back to the original color. This question serves as a follow-up to the query found at div onclick prompts yes or no, if yes, div change to different color

javascript html css

Answer 1

Answer №1

Success! This solution worked perfectly for me.

The Breakdown:

One key observation was that JavaScript was unable to access the element.style property from the .white class directly, but including inline CSS for each element resolved this issue. A live example showcasing this can be found in the linked jsfiddle.
Another crucial aspect was identifying the improper use of the this scope within the function without defining its context. By passing the appropriate this argument to the click event handler and then replacing it with e, the functionality was successfully rectified.

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>

Answer 2

Success! This solution worked perfectly for me.

The Breakdown:

One key observation was that JavaScript was unable to access the element.style property from the .white class directly, but including inline CSS for each element resolved this issue. A live example showcasing this can be found in the linked jsfiddle.
Another crucial aspect was identifying the improper use of the this scope within the function without defining its context. By passing the appropriate this argument to the click event handler and then replacing it with e, the functionality was successfully rectified.

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>

Answer 3

Answer №2

function manipulateColor(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("box");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    manipulateColor(this);
  });
}

.box {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}

.white {
  background-color: white;
}

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

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

<div class="container">
  <div id="box1" class="box" style="background:white;">A1</div>
  <div id="box2" class="box" style="background:white;">A2</div>
  <div id="box3" class="box" style="background:white;">A3</div><br><br>

  <div id="box4" class="box" style="background:white;">B1</div>
  <div id="box5" class="box" style="background:white;">B2</div>
  <div id="box6" class="box" style="background:white;">B3</div>
</div>

This is the solution I was looking for!

     <!doctype html>
<html>
<head>
<script language ="javascript">
function manipulateColor(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("box");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    manipulateColor(this);
  });
}
</script>


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

.white {
  background-color: white;
}

.container {
  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="container">
  <div id="box1" class="box" style="background:white;">A1</div>
  <div id="box2" class="box" style="background:white;">A2</div>
  <div id="box3" class="box" style="background:white;">A3</div><br><br>

  <div id="box4" class="box" style="background:white;">B1</div>
  <div id="box5" class="box" style="background:white;">B2</div>
  <div id="box6" class="box" style="background:white;">B3</div>
</div>
</body>
</html>

This is my HTML code that doesn't work even though I copied and pasted the code snippet

Answer 4

function manipulateColor(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("box");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    manipulateColor(this);
  });
}

.box {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}

.white {
  background-color: white;
}

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

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

<div class="container">
  <div id="box1" class="box" style="background:white;">A1</div>
  <div id="box2" class="box" style="background:white;">A2</div>
  <div id="box3" class="box" style="background:white;">A3</div><br><br>

  <div id="box4" class="box" style="background:white;">B1</div>
  <div id="box5" class="box" style="background:white;">B2</div>
  <div id="box6" class="box" style="background:white;">B3</div>
</div>

This is the solution I was looking for!

     <!doctype html>
<html>
<head>
<script language ="javascript">
function manipulateColor(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("box");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", function() {
    manipulateColor(this);
  });
}
</script>


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

.white {
  background-color: white;
}

.container {
  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="container">
  <div id="box1" class="box" style="background:white;">A1</div>
  <div id="box2" class="box" style="background:white;">A2</div>
  <div id="box3" class="box" style="background:white;">A3</div><br><br>

  <div id="box4" class="box" style="background:white;">B1</div>
  <div id="box5" class="box" style="background:white;">B2</div>
  <div id="box6" class="box" style="background:white;">B3</div>
</div>
</body>
</html>

This is my HTML code that doesn't work even though I copied and pasted the code snippet

What could be causing the lack of color change in my boxes even after confirming the prompt?

Answer №1

Answer №2

Similar questions

Connecting via web sockets through SSL is not functioning properly

A PHP mishap causing unexpected errors

React 16 is encountering a discrepancy due to the absence of the data-reactroot attribute

Finding the name of a particular item in an array and increasing its value - a step-by-step guide

Guide on removing the parent JSON array while retaining the child JSON array

PHP - display the modified page with the updates applied

Is there a jQuery or Javascript alternative to CSS Counter?

By using Yii2, you can pass an id to the URL by simply clicking on a

What is the best way to implement dragging functionality for an image within a specific area?

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second

Capturing numerous data points with JavaScript

What is the best method for designing a custom mask for the jQuery Masked Input Plugin that accommodates alphanumeric characters, spaces, and accented

When using Node.js and geth together, running JavaScript code may lead to the creation of zombie processes, causing the

Arrangement of cards in a column

Strange Actions with JQuery Drag-and-Drop Functionality

Value as a String inside an Object

Adding a JSON file to an Angular app hosted on a Grunt server

How can we create responsive websites?

Can I bypass an invalid SSL certificate when making a request using a JavaScript library?

Error 404: Page not found. Sorry, we couldn't locate the Node JS and Express resource