span tag question

Hikarim · 01/13/2013, 13:10

Hi,
i'd like to ask something about the span tag. It is like this, i have a JS script for calculating in which i add in numbers...
and i have to surround the out put with a span tag, so that it does color the output green if the entered number is positive or red if negative...

Now i'd like to ask, how can i make the span to check for the value if its possitive or negative, and use the according CSS class?

MrPuschel · 01/13/2013, 14:04

Jquery:

HTML Code:

// Guessing you don't have your span yet
var mySpan = $('#spanId');

// set myClass to negative if content of mySpan is less then 0, else set it to positive
var myClass = parseInt(mySpan.text()) < 0 ?
                       "negative" :
                       "positive";

// just set the class.

mySpan.attr('class',myClass);

Here's the plain javascript example:

HTML Code:

// Guessing you don't have your span yet
var mySpan = document.getElementById("spanId");

// set myClass to negative if content of mySpan is less then 0, else set it to positive
var myClass = parseInt(mySpan.innerHtml) < 0 ?
                       "negative" :
                       "positive";

// just set the class
mySpan.setAttribute("class", myClass);

Try it here:

Hikarim · 01/13/2013, 15:32

OK, thank you

MrPuschel · 01/13/2013, 15:51

Here:

Hikarim · 01/13/2013, 16:08

I made it work somehow, with a little bug, it uses the same calss for both negative and positive numbers :S

Code:

//the calss swap code
var mySpan = document.getElementById("spanIda")

var myClass = document.getElementById("sta").innerHTML > 0 ?
                       "neg" :
                       "poz";

mySpan.setAttribute("class", myClass);


//the output part with span..
<span id="spanIda">
	<p id="sta"></p>
</span>

Here's my full code to understand it better:

Code:

<html>

<head>

<title>Racunanje</title>

<style type="text/css">

.neg {
color:#000099;
}

.poz {
color:#00FF33;
}

</style>


</head>

<body>

<p>Click button ot begin.</p>

<button onClick="racunaj()">Calc</button>


<span id="spanIda">
	<p id="sta"></p>
</span>


	<p id="stb"></p>


<p id="calc1"></p>
<p id="calc2"></p>
<p id="calc3"></p>
<p id="calc4"></p>
<p id="calc5"></p>


<script>
function racunaj()
{

var a;
var b;
var x;
var y;
var e;
var f;
var g;


var namea=prompt("enter A:");
var nameb=prompt("enter B:");



var sum;
sum=(parseFloat(namea)+parseFloat(nameb));

var minus;
minus=(parseFloat(namea)-parseFloat(nameb));

var mnozi;
mnozi=(parseFloat(namea)*parseFloat(nameb));

var deli;
deli=(parseFloat(namea)/parseFloat(nameb));

var ostanek;
ostanek=(parseFloat(namea)%parseFloat(nameb));


a="A: " + namea;
document.getElementById("sta").innerHTML=a;

b="B: " + nameb;
document.getElementById("stb").innerHTML=b;

x="Vsota: " + sum;
document.getElementById("calc1").innerHTML=x;

y="Razlika: " + minus;
document.getElementById("calc2").innerHTML=y;

e="Zmnozek: " + mnozi;
document.getElementById("calc3").innerHTML=e;

f="Deljenje: " + deli;
document.getElementById("calc4").innerHTML=f;

g="Ostanek pri deljenju: " + ostanek;
document.getElementById("calc5").innerHTML=g;




var mySpan = document.getElementById("spanIda")

var myClass = parseInt(mySpan.innerHTML) < 0 ?
                       "neg" :
                       "poz";

mySpan.setAttribute("class", myClass);




}
</script>






</body>
</html>

MrPuschel · 01/13/2013, 16:42

You tried to read the value out of the dom.
var mySpan = document.getElementById("spanIda")

But you never injected the value into the dom. You saved it in your variable namea.
So, you always checked if undefined < 0. And undefined is "bigger" then 0 in some crazy way.