<table >
        <thead>
        <tr>
            <th>symbol</th>
            <th>doji dragon</th>
            <th>doji grave</th>
            <th>timeframe</th>
        </tr>
        </thead>
        <tbody id="myTable">
        </tbody>
var ref12 = collection(db,"doji4h");
const querySnapshot1 = await getDocs(ref12);
querySnapshot1.forEach((doc2) => {




 let data2 = doc2.data();
            let row  = `<tr>
                            <td>${data2.symbol}</td>
                            <td bgcolor=greencolor>${data2.doji_dragon}</td>
                            <td bgcolor=redcolor>${data2.doji_grave}</td>
                             <td>${data2.timeframe}</td>
                      </tr>`;
            let table = document.getElementById('myTable2')
           table.innerHTML  = row
   });
let dojidragoncolor= data2.doji_dragon;
let dojigravecolor= data2.doji_grave;
if (dojidragoncolor === Bullish){
greencolor="green";}
else{
greencolor="white";

}

if (dojigravecolor === Bearish){
redcolor="red";}
else{
redcolor="white";
}

I want to change color of data2doji_dragon and data2.doji_grave. red and green according to bullish or bearish string come from firebase

all the data is green now . there is a notation problem I have it seems

CodePudding user response：

Try changing two things.

1. Calculate the values of redcolor and greencolor earlier

At the moment you are creating them after the time you want to read them. Move the "if (doji ..." statements before the "let row ..."

2. Mark the term 'greencolor' as needing interpolation

Currently you are using

bgcolor = greencolor

If I remember correctly, the browser will read that as a string:

bgcolor = "greencolor"

And it handles that unknown color "greencolor" by ignoring the last part, so that it is behaving as though you had written:

bgcolor = "green"

Here is what I propose:

(As the first attempt was unsuccessful, I have added extra information into the displayed table cell, for diagnostic purposes.)

let data2 = doc2.data();

let dojidragoncolor = data2.doji_dragon;
let dojigravecolor = data2.doji_grave;
if (dojidragoncolor === Bullish) {
  greencolor = "green";
} else {
  greencolor = "white";

}

if (dojigravecolor === Bearish) {
  redcolor = "red";
} else {
  redcolor = "white";
}

let row = `
<tr>
 <td bgcolor="${greencolor}">${data2.doji_dragon} ${greencolor}</td>
 <td bgcolor="${redcolor}">${data2.doji_grave} ${redcolor}</td>
</tr>`;

CodePudding user response：

let data2 = doc2.data();// it have to be after this line 
const dojidragoncolor= data2.engulfing_bullish;
const dojigravecolor= data2.engulfing_bearish;

let bullcolor =""
let bearcolor = ""

if (dojidragoncolor == "Bullish"){
bullcolor="green";}
else{
bullcolor="white";

}

if (dojigravecolor == "Bearish"){
bearcolor="red";}
else{
bearcolor="white";
}
console.log(bullcolor);
console.log(bearcolor);
 let row  = `<tr>
                            <td>${data2.symbol}</td>
                            <td bgcolor=${bullcolor}>${data2.engulfing_bullish}</td>
                           <td bgcolor=${bearcolor}>${data2.engulfing_bearish}</td>
                             <td>${data2.timeframe}</td>
                      </tr>`;
            let table = document.getElementById('myTable2')