Question

0

115

Views

taken data from firebase change color in javascript

<table class="table is-striped is-narrow is-hoverable is-fullwidth">
        <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

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T05:24:01.724Z

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>`;

Answer 2 · 2022-06-28T05:24:01.732Z

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')

0

115