Changing the color of an element based on a Boolean Field

Hello fellow Wix users! I have a problem that I’m hoping someone will be able to help me figure out. I’ve spend several hours on this particular issue, and can’t seem to find an answer elsewhere in and outside of this forum. In any case, thank you for taking the time to read this!

So, I want to add an element (image, icon, etc.) to a dynamic page that changes color based on the condition of a Boolean Field in a datasheet. With my limited knowledge of javascript and the help of other posts, I’ve managed to put the following together. I have a collection (ProductsDyn, aka dataset1 in the page), a Boolean Field (creases), and a box who’s color I wish to change, depending on whether or not “creases” is checked. The problem is that it the expression always reads false, even when creases is checked, so the color doesn’t change. I have tried many variations of this code to no avail.

Is there a mistake in this code? I’m inclined to think that I may not be calling the “creases” field properly, since I was having trouble finding a direct answer about how to do that.

Thank you for your time!

wixData.query("ProductsDyn")
  .eq("creases", true)
  .find()
  .then( (results) => {
 let boolean = results.items[0].creases;
 if(boolean === "true"){
     $w("#box2").style.backgroundColor = "#ffff";
     console.log("it's true");  
     } 
 else{ 
     $w("#box2").style.backgroundColor = "#ef0"; 
     console.log("it's false"); 
     }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );

Let’s start with some debugging. Can you add the red line?:

wixData.query("ProductsDyn")
.eq("creases",true)
.find()
.then((results)=>{
console.log("results [0] returned from query = " + JSON.stringify(results.items[0]));
let boolean= results.items[0].creases;

Thank you very much for your response Giri! The following is what I get when I plug it in. It does seem that “creases” is actually true, although the boolean won’t see it as such!

Loading the code for the Products (Dyn) (Title) page. To debug this code, open ae518.js in Developer Tools.

results [0] returned from query = {"image":"wix:image://v1/fc7570_ae9913d461894a7ebb7fc420d828ab83~mv2.png/Image-empty-state.png#originWidth=1920&originHeight=1080","description":"I'm a paragraph. I'm connected to your collection through a dataset. Click Preview to see my content. To update me, go to the Data Manager.","_id":"00000000-0000-0000-0000-000000000002","_owner":"c8bffc82-3f37-4541-a85b-1c3af9a932e7","_createdDate":"2021-02-15T09:13:59.834Z","_updatedDate":"2021-02-15T15:43:43.009Z","whoKnows":["Mint","New Type","Near Mint"],"creases":true,"title":"I am a title 02","link-products-dyn-all":"/products-dyn/","link-products-dyn-title":"/products-dyn/i-am-a-title-02"}
it's false

Oh shite, I’ve been sleeping. You should not test for:

if(boolean==="true"){

but for

if(boolean===true){

or. easier

if(boolean){

Thank you very much for your reply Giri! I inserted the code and it did turn the box black (it was stuck on yellow before!) So we know that the program is properly reading the Boolean, at least! But it seems to have run into a different problem that is still preventing it from working properly!

If I go into the preview, I can see that the box has turned black, meaning that it is reading the Boolean Field “creases” as “true”. However, if I cycle to a page where I know that “creases” is false, it remains black. I thought that it must be a problem reading the field properly, but now I’m not so sure.

After checking on the log that you asked me to insert early (fantastic, btw!), it seems that the data that is queried is the second row of the datasheet. Since “creases” is true on this row, it makes sense that the box turns black. However, if I change the preview to another page, which in turn should query a different row of the datasheet, I can see in the console that the code it still querying row 2. The information on the previewed page does change, leading me to believe that the page is cycling and reading the datasheet properly, but the queried info for the boolean always pulls information from the second row of the datasheet for some reason.

I am not that familiar with Javascript or Wix, so perhaps this is normal behavior for the preview, but I’m really not sure. I hope that someone may have a solution to this!

I’ll include a few screenshots in case anyone needs them!