Get different colors inb HEAD using if?

JavaScript
1

Hello!
I have to get if nr1 is <0 writen out blue colored, and red if it is <0.

I have to achieve it WITH CSS IUN HEAD!!!-usig class and span tags!

Please ,any hints?
it must be javascript!

many thanks!

<!DOCTYPE html>
<html>





<body>



<button onclick="myFunction()">Try it</button>

<p nr1=<span id="1"></span></p>
<p nr2=<span id="2"></span></p>


<script>
function myFunction()
{
var nr1=prompt("Enter nr1", "nr1");
var nr2=prompt("Enter nr2", "nr2");


document.getElementById("1").innerHTML= nr1;
document.getElementById("2").innerHTML= nr2;
}

</script>
</body>
</html>
2

Hi,

Is this supposed to be your homework? You should really make an attempt first and then we can correct it.

Bear in mind I’m a beginner also then this would be my attempt.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.color1 { color:blue }
.color2 { color:red }
span { margin-right:25px }
</style>
</head>

<body>
<button id="numberButton">Try it</button>
<p>Number 1 = :<span id="num1"></span> Number 2= :<span id="num2"></span></p>
<script>
document.getElementById("numberButton").onclick = function () {
    var nr1 = prompt("Enter nr1", "nr1");
    var nr2 = prompt("Enter nr2", "nr2");
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");

    var theClass = (nr1 < 0) ? "color1" : "color2";
    var theClass2 = (nr2 < 0) ? "color1" : "color2";

    num1.innerHTML = nr1;
    num2.innerHTML = nr2;
    num1.className = theClass;
    num2.className = theClass2;

}
</script>
</body>
</html>

It’s probably much too verbose again but seems to work.

3

It seems you have already asked this question in this thread.

Please try to keep track of your posts and avoid double posting.

Thread closed