Jump to content
Sign in to follow this  
tooth-paste

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">
<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>

 

Share this post


Link to post
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>
						
						<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>&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 this post


Link to post
Share on other sites
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...