SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    get different colors inb HEAD using if???

    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!

    Code:
    <!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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •