tooth-paste Posted June 1, 2018 Share Posted June 1, 2018 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"> <head> <title>Forge of Empires - Arc bonus Calculator</title> </head> <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> Link to comment Share on other sites More sharing options...
Autofahrn Posted June 2, 2018 Share Posted June 2, 2018 you are looking for something like: output.style.color = "red"; https://www.w3schools.com/jsref/prop_html_style.asp Link to comment Share on other sites More sharing options...
Martijn Geerts Posted June 3, 2018 Share Posted June 3, 2018 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. http://hslpicker.com/#5f0 1 Link to comment Share on other sites More sharing options...
tooth-paste Posted June 3, 2018 Author Share Posted June 3, 2018 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> <div style="padding-bottom: 8px">Level huidig/maximum</div> <input id="b" type="number" oninput="fire()"> / <input id="c" type="number" oninput="fire()"> <br /> <div> </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()"> <b><span id="arcbonus"></b></span><br /> <div> </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> </div> <div> </div> <div style="font-size: 18px"><span id="result"></span> <span id="bonus"></span></div><br /> <div> </div> <div> </div> <div> </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"; Link to comment Share on other sites More sharing options...
tooth-paste Posted June 4, 2018 Author Share Posted June 4, 2018 THX, I found a solution:) Link to comment Share on other sites More sharing options...
Recommended Posts