Get different colors inb HEAD using if?

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>


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

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

function myFunction()
var nr1=prompt("Enter nr1", "nr1");
var nr2=prompt("Enter nr2", "nr2");

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



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.

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

<button id="numberButton">Try it</button>
<p>Number 1 = :<span id="num1"></span> Number 2= :<span id="num2"></span></p>
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;


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

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