Styjun

Interaction between Ethereal Absolution versus Edgar Markov with Captivating Vampire

How can I describe being temporarily stupid?

Can I submit a paper under an alias so as to avoid trouble in my country?

Convert HTML color to OLE

Moons that can't see each other

Is there any road between the CA State Route 120 and Sherman Pass Road (Forest Route 22S0) that crosses Yosemite/Serria/Sequoia National Park/Forest?

Why don't sharp and flat root note chords seem to be present in much guitar music?

What happened after the end of the Truman Show?

Vacuum collapse -- why do strong metals implode but glass doesn't?

Unbiased estimator of exponential of measure of a set?

Is "stainless" a bulk or a surface property of stainless steel?

Are there reliable, formulaic ways to form chords on the guitar?

Alchemist potion on Undead

Gofer work in exchange for Letter of Recommendation

Earliest evidence of objects intended for future archaeologists?

Are required indicators necessary for radio buttons?

How many spells can a level 1 wizard learn?

Land Registry Clause

What fuel is J005311 burning?

Story about a demon trying to make a man insane

Would it be illegal for Facebook to actively promote a political agenda?

IV curve on this solar panel datasheet

Sleeping solo in a double sleeping bag

Why is su world executable?

Change font colour for positive/negative values that are imported from Google Sheets

mtree java script not working in IEJquery problem with IEXMLHttpRequest status 0 (responseText is empty)return value from ajax call to javascriptAjax call to PHP is returning nothingPHP and AJAX login formjoin 2 same almost same function into 1Combine 2 function javascript into 1Submit an ajax form created by an ajax callJavascript make a function read file to an array and return the result to this function

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

Here is my code that allows me to import from my Google Sheet by specifying the column titles.

function httpGetAsync(theUrl, callback) 
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = function() 
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 callback(xmlHttp.responseText);
 
 xmlHttp.open("GET", theUrl, true); // true for asynchronous
 xmlHttp.send(null);


httpGetAsync('https://spreadsheet.glitch.me/?key=1JBbAHH1DFtO1r56lr94lUqd8H7qPcHncJskcPq0r96o', function(response) 
 var json = JSON.parse(response);

 document.getElementById("btm").innerHTML = json[0].btm;
 document.getElementById("AvgPoints").innerHTML = json[0].AvgPoints;
 document.getElementById("Overtakes").innerHTML = json[0].Overtakes;
 document.getElementById("podium").innerHTML = json[0].podium;
 document.getElementById("highest").innerHTML = json[0].highest;
);

This allows me to put <div id="AvgPoints"></div> in my HTML and it populates based on the value in my Google Sheets document. My aim is to colour the font green for positive numbers (including 0) and red for negative numbers. Is this possible bearing in mind there isn't actually a number between the <div></div> tags in my HTMl code? If it is, I'd also be interested to learn how to add +/- characters infront of the imported number based on if it is positive/negative as well. Sorry I'm trying to learn. Thanks!

javascript jquery google-sheets colors

share|improve this question

edited Mar 27 at 14:46

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 14:44

Liam ThompsonLiam Thompson

755 bronze badges

add a comment | 

0

Here is my code that allows me to import from my Google Sheet by specifying the column titles.

function httpGetAsync(theUrl, callback) 
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = function() 
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 callback(xmlHttp.responseText);
 
 xmlHttp.open("GET", theUrl, true); // true for asynchronous
 xmlHttp.send(null);


httpGetAsync('https://spreadsheet.glitch.me/?key=1JBbAHH1DFtO1r56lr94lUqd8H7qPcHncJskcPq0r96o', function(response) 
 var json = JSON.parse(response);

 document.getElementById("btm").innerHTML = json[0].btm;
 document.getElementById("AvgPoints").innerHTML = json[0].AvgPoints;
 document.getElementById("Overtakes").innerHTML = json[0].Overtakes;
 document.getElementById("podium").innerHTML = json[0].podium;
 document.getElementById("highest").innerHTML = json[0].highest;
);

This allows me to put <div id="AvgPoints"></div> in my HTML and it populates based on the value in my Google Sheets document. My aim is to colour the font green for positive numbers (including 0) and red for negative numbers. Is this possible bearing in mind there isn't actually a number between the <div></div> tags in my HTMl code? If it is, I'd also be interested to learn how to add +/- characters infront of the imported number based on if it is positive/negative as well. Sorry I'm trying to learn. Thanks!

javascript jquery google-sheets colors

share|improve this question

edited Mar 27 at 14:46

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 14:44

Liam ThompsonLiam Thompson

755 bronze badges

add a comment | 

Here is my code that allows me to import from my Google Sheet by specifying the column titles.

function httpGetAsync(theUrl, callback) 
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = function() 
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 callback(xmlHttp.responseText);
 
 xmlHttp.open("GET", theUrl, true); // true for asynchronous
 xmlHttp.send(null);


httpGetAsync('https://spreadsheet.glitch.me/?key=1JBbAHH1DFtO1r56lr94lUqd8H7qPcHncJskcPq0r96o', function(response) 
 var json = JSON.parse(response);

 document.getElementById("btm").innerHTML = json[0].btm;
 document.getElementById("AvgPoints").innerHTML = json[0].AvgPoints;
 document.getElementById("Overtakes").innerHTML = json[0].Overtakes;
 document.getElementById("podium").innerHTML = json[0].podium;
 document.getElementById("highest").innerHTML = json[0].highest;
);

This allows me to put <div id="AvgPoints"></div> in my HTML and it populates based on the value in my Google Sheets document. My aim is to colour the font green for positive numbers (including 0) and red for negative numbers. Is this possible bearing in mind there isn't actually a number between the <div></div> tags in my HTMl code? If it is, I'd also be interested to learn how to add +/- characters infront of the imported number based on if it is positive/negative as well. Sorry I'm trying to learn. Thanks!

javascript jquery google-sheets colors

share|improve this question

edited Mar 27 at 14:46

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 14:44

Liam ThompsonLiam Thompson

755 bronze badges

function httpGetAsync(theUrl, callback) 
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = function() 
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 callback(xmlHttp.responseText);
 
 xmlHttp.open("GET", theUrl, true); // true for asynchronous
 xmlHttp.send(null);


httpGetAsync('https://spreadsheet.glitch.me/?key=1JBbAHH1DFtO1r56lr94lUqd8H7qPcHncJskcPq0r96o', function(response) 
 var json = JSON.parse(response);

 document.getElementById("btm").innerHTML = json[0].btm;
 document.getElementById("AvgPoints").innerHTML = json[0].AvgPoints;
 document.getElementById("Overtakes").innerHTML = json[0].Overtakes;
 document.getElementById("podium").innerHTML = json[0].podium;
 document.getElementById("highest").innerHTML = json[0].highest;
);

share|improve this question

edited Mar 27 at 14:46

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 14:44

Liam ThompsonLiam Thompson

755 bronze badges

share|improve this question

edited Mar 27 at 14:46

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 14:44

Liam ThompsonLiam Thompson

755 bronze badges

edited Mar 27 at 14:46

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

edited Mar 27 at 14:46

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 14:44

Liam ThompsonLiam Thompson

755 bronze badges

asked Mar 27 at 14:44

Liam ThompsonLiam Thompson

755 bronze badges

1 Answer
1

active

oldest

votes

0

Just convert the value to a number, check for positive or negative and then you could assign a pre-made CSS class to the element, along with possibly prepending the appropriate + symbol (I assume negative values already have - in front of them).

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div)
 // Convert text to number and test for positive/negative
 if((+div.textContent) >= 0)
 div.classList.add("positive"); // Apply positive style
 div.textContent = "+" + div.textContent; 
 else 
 div.classList.add("negative"); // Apply negative style 
 
);

.positive color: green; 
.negative color: red; 

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>

share|improve this answer

edited Mar 27 at 15:56

answered Mar 27 at 15:01

Scott MarcusScott Marcus

43.4k66 gold badges2222 silver badges4343 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ah! I see perfect. Is there a way to do this without copying and pasting all of that for every ID I have - as .getElementById can only have 1 ID in it. how could i use something like document.querySelectorAll to apply your code to multiple id's at once? Appreciate your help!
  
  – Liam Thompson
  Mar 27 at 15:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson You'd need something that all the elements have in common, like a class or you could use multiple selectors, like document.querySelectorAll("#AvgPoints, #somethingElse, #somethingElse") and then just loop over the resulting node list and use my code in the loop.
  
  – Scott Marcus
  Mar 27 at 15:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson If my answer was helpful, please "up vote" it and consider marking it as "the" answer by clicking the checkmark at the top-left of the answer.
  
  – Scott Marcus
  Mar 27 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see what you mean. I'm trying this at the moment., and have managed to get the first id to work. Can you spot why the other isn't working? let divs = document.querySelectorAll("#btm", "#AvgPoints"); [].forEach.call(divs, function(div) // Convert text to number and test for positive/negative if((+div.textContent) >= 0) div.classList.add("positive"); // Apply positive style else div.classList.add("negative"); // Apply negative style );
  
  – Liam Thompson
  Mar 27 at 15:44
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson You shouldn't be putting each id in its own set of quotes. It should just be: let divs = document.querySelectorAll("#btm, #AvgPoints"); as one comma separated string. Otherwise, you are passing multiple arguments to .querySelectorAll(), which it doesn't accept.
  
  – Scott Marcus
  Mar 27 at 15:53
  

  
  
  
  

 | 
show 5 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55380023%2fchange-font-colour-for-positive-negative-values-that-are-imported-from-google-sh%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Just convert the value to a number, check for positive or negative and then you could assign a pre-made CSS class to the element, along with possibly prepending the appropriate + symbol (I assume negative values already have - in front of them).

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div)
 // Convert text to number and test for positive/negative
 if((+div.textContent) >= 0)
 div.classList.add("positive"); // Apply positive style
 div.textContent = "+" + div.textContent; 
 else 
 div.classList.add("negative"); // Apply negative style 
 
);

.positive color: green; 
.negative color: red; 

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>

share|improve this answer

edited Mar 27 at 15:56

answered Mar 27 at 15:01

Scott MarcusScott Marcus

43.4k66 gold badges2222 silver badges4343 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ah! I see perfect. Is there a way to do this without copying and pasting all of that for every ID I have - as .getElementById can only have 1 ID in it. how could i use something like document.querySelectorAll to apply your code to multiple id's at once? Appreciate your help!
  
  – Liam Thompson
  Mar 27 at 15:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson You'd need something that all the elements have in common, like a class or you could use multiple selectors, like document.querySelectorAll("#AvgPoints, #somethingElse, #somethingElse") and then just loop over the resulting node list and use my code in the loop.
  
  – Scott Marcus
  Mar 27 at 15:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson If my answer was helpful, please "up vote" it and consider marking it as "the" answer by clicking the checkmark at the top-left of the answer.
  
  – Scott Marcus
  Mar 27 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see what you mean. I'm trying this at the moment., and have managed to get the first id to work. Can you spot why the other isn't working? let divs = document.querySelectorAll("#btm", "#AvgPoints"); [].forEach.call(divs, function(div) // Convert text to number and test for positive/negative if((+div.textContent) >= 0) div.classList.add("positive"); // Apply positive style else div.classList.add("negative"); // Apply negative style );
  
  – Liam Thompson
  Mar 27 at 15:44
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson You shouldn't be putting each id in its own set of quotes. It should just be: let divs = document.querySelectorAll("#btm, #AvgPoints"); as one comma separated string. Otherwise, you are passing multiple arguments to .querySelectorAll(), which it doesn't accept.
  
  – Scott Marcus
  Mar 27 at 15:53
  

  
  
  
  

 | 
show 5 more comments

0

Just convert the value to a number, check for positive or negative and then you could assign a pre-made CSS class to the element, along with possibly prepending the appropriate + symbol (I assume negative values already have - in front of them).

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div)
 // Convert text to number and test for positive/negative
 if((+div.textContent) >= 0)
 div.classList.add("positive"); // Apply positive style
 div.textContent = "+" + div.textContent; 
 else 
 div.classList.add("negative"); // Apply negative style 
 
);

.positive color: green; 
.negative color: red; 

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>

share|improve this answer

edited Mar 27 at 15:56

answered Mar 27 at 15:01

Scott MarcusScott Marcus

43.4k66 gold badges2222 silver badges4343 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ah! I see perfect. Is there a way to do this without copying and pasting all of that for every ID I have - as .getElementById can only have 1 ID in it. how could i use something like document.querySelectorAll to apply your code to multiple id's at once? Appreciate your help!
  
  – Liam Thompson
  Mar 27 at 15:19
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson You'd need something that all the elements have in common, like a class or you could use multiple selectors, like document.querySelectorAll("#AvgPoints, #somethingElse, #somethingElse") and then just loop over the resulting node list and use my code in the loop.
  
  – Scott Marcus
  Mar 27 at 15:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson If my answer was helpful, please "up vote" it and consider marking it as "the" answer by clicking the checkmark at the top-left of the answer.
  
  – Scott Marcus
  Mar 27 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see what you mean. I'm trying this at the moment., and have managed to get the first id to work. Can you spot why the other isn't working? let divs = document.querySelectorAll("#btm", "#AvgPoints"); [].forEach.call(divs, function(div) // Convert text to number and test for positive/negative if((+div.textContent) >= 0) div.classList.add("positive"); // Apply positive style else div.classList.add("negative"); // Apply negative style );
  
  – Liam Thompson
  Mar 27 at 15:44
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @LiamThompson You shouldn't be putting each id in its own set of quotes. It should just be: let divs = document.querySelectorAll("#btm, #AvgPoints"); as one comma separated string. Otherwise, you are passing multiple arguments to .querySelectorAll(), which it doesn't accept.
  
  – Scott Marcus
  Mar 27 at 15:53
  

  
  
  
  

 | 
show 5 more comments

Just convert the value to a number, check for positive or negative and then you could assign a pre-made CSS class to the element, along with possibly prepending the appropriate + symbol (I assume negative values already have - in front of them).

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div)
 // Convert text to number and test for positive/negative
 if((+div.textContent) >= 0)
 div.classList.add("positive"); // Apply positive style
 div.textContent = "+" + div.textContent; 
 else 
 div.classList.add("negative"); // Apply negative style 
 
);

.positive color: green; 
.negative color: red; 

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>

share|improve this answer

edited Mar 27 at 15:56

answered Mar 27 at 15:01

Scott MarcusScott Marcus

43.4k66 gold badges2222 silver badges4343 bronze badges

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div)
 // Convert text to number and test for positive/negative
 if((+div.textContent) >= 0)
 div.classList.add("positive"); // Apply positive style
 div.textContent = "+" + div.textContent; 
 else 
 div.classList.add("negative"); // Apply negative style 
 
);

.positive color: green; 
.negative color: red; 

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div)
 // Convert text to number and test for positive/negative
 if((+div.textContent) >= 0)
 div.classList.add("positive"); // Apply positive style
 div.textContent = "+" + div.textContent; 
 else 
 div.classList.add("negative"); // Apply negative style 
 
);

.positive color: green; 
.negative color: red; 

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div)
 // Convert text to number and test for positive/negative
 if((+div.textContent) >= 0)
 div.classList.add("positive"); // Apply positive style
 div.textContent = "+" + div.textContent; 
 else 
 div.classList.add("negative"); // Apply negative style 
 
);

.positive color: green; 
.negative color: red; 

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>

share|improve this answer

edited Mar 27 at 15:56

answered Mar 27 at 15:01

Scott MarcusScott Marcus

43.4k66 gold badges2222 silver badges4343 bronze badges

answered Mar 27 at 15:01

Scott MarcusScott Marcus

43.4k66 gold badges2222 silver badges4343 bronze badges

answered Mar 27 at 15:01

Scott MarcusScott Marcus

43.4k66 gold badges2222 silver badges4343 bronze badges