# Color formula result (SOLVED)

## Recommended Posts

I trying to make a Forge of Empire calculator. But before I start my design I want my formula to work. The code below works fine (thx to Bernard and kixe).

Is it possible to color the result green or red on a curtain result?

```<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Forge of Empires - Arc bonus Calculator</title>
<body>

<h3>Forge of Empires - Arc bonus Calculator</h3><br /><br />

<body>
P1 beloning<input id="a" type="number" oninput="fire()">  <span id="bonus"></span><br />
Level huidig <input id="b" type="number" oninput="fire()"><br />
Level maximum <input id="c" type="number" oninput="fire()"><br />
P1 huidig <input id="d" type="number" oninput="fire()"><br />
<span id="result"></span>
</body>

<script>
function fire() {
var a = parseInt(document.getElementById ( "a" ).value);
var b = parseInt(document.getElementById ( "b" ).value);
var c = parseInt(document.getElementById ( "c" ).value);
var d = parseInt(document.getElementById ( "d" ).value);

var output = document.getElementById ( "result" );
var result = calculate(a, b, c, d);
output.innerHTML = "Veilig: " + result;
}

function calculate(a, b, c, d) {
return c - b -(a * 1.8) + d;
}

</script>```

##### Share on other sites

you are looking for something like:

`output.style.color = "red";`

##### Share on other sites

I wouldn't use a formula for this I would use a 'pecentage value' and use HSL color.

hsl(0, 100%, 50%) is red, hsl(100, 100%, 50%) is green the color traverses over yellow.

• 1

##### Share on other sites

I can not get it to work. Not enough js knowledge i'am afraid. This is my code:

```		<div class="container" style="padding-top: 6%;color: white">

<div class="row">
<div class="col-md-6 col-md-offset-3" style="background-color:black;">

<h6 class="text-center">Forge of Empires</h6>
<h2 class="text-center" style="padding-bottom: 4%">Calculator Arc bonus (1,8)</h2>

<input id="b" type="number" oninput="fire()"> / <input id="c" type="number" oninput="fire()"> <br />

<div>&nbsp;</div>

<div style="padding-bottom: 8px">Beloning (De beloning die een speler krijgt op een specifieke positie)</div>
<input id="a" type="number" oninput="fire()"> &nbsp;<b><span id="arcbonus"></b></span><br />

<div>&nbsp;</div>

<div style="padding-bottom: 8px">Inleg uitdager (degene die al op deze positie fp's heeft ingelegd)</div>
<input id="d" type="number" oninput="fire()"><br />

<div>&nbsp;</div>
<div>&nbsp;</div>

<div style="font-size: 18px"><span id="result"></span> <span id="bonus"></span></div><br />

<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

<div style="font-size: 10px;padding-bottom: 25px">*Magische getal = Level maximum <b>-</b> level huidig <b>-</b> (P1 beloning * 1,8) <b>+</b> P1 huidig</div>
</div>
</div>
</div>

<script>
function fire() {
var a = parseInt(document.getElementById ( "a" ).value);
var b = parseInt(document.getElementById ( "b" ).value);
var c = parseInt(document.getElementById ( "c" ).value);
var d = parseInt(document.getElementById ( "d" ).value);

var output = document.getElementById ( "result" );
var result = calculate(a, b, c, d);
output.innerHTML = "Magische getal* = <b>" + result + "</b>. <br />Wanneer een positie veilig is om in te nemen moet het magische getal lager zijn dan:";

var output = document.getElementById ( "bonus" );
var bonus = calbonus(a);
output.innerHTML = "<b>" + bonus + "</b>";

var output = document.getElementById ( "arcbonus" );
var arcbonus = calarc(a);
output.innerHTML = "(Incl. Arc bonus:" + arcbonus + ")";

}

function calculate(a, b, c, d) {
return c - b -(a * 1.8) + d;
}
function calbonus(a) {
return a * 1.8;
}

function calarc(a) {
return a * 1.8;
}
</script>```

Can you give me a clue about how to implement

`output.style.color = "red";`

##### Share on other sites

THX, I found a solution:)